0

what I'm trying to do is: I have a content div under a card which should contain a span for the title, a short description span (must be truncated) and a price span. I want the content div to be max 2 lines of text high and only the span for the description needs to be truncated.

My code:

.card .card-content{
    padding: 16px 8px 8px 8px;
    line-height: normal;
}
.card .card-content span.card-title{
    display: block;
    width: auto;
    font-size: 1rem;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}
.card .card-content span.card-excerpt{
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: normal;
    opacity: 0.75;
    font-weight: 300;
}
.card .card-content .card-price{
    display: block;
    width: auto;
    line-height: normal;
    font-weight: 500;
}
<head>
<link rel="stylesheet" type="text/css" href="https://github.com/Dogfalo/materialize/blob/master/dist/css/materialize.css">
</head>
<body>
<div class="row">
<div class="col s6">
<div clas="card">
  <div class="card-content">   
    <div>
      <span class="card-title">This a cool product</span>
      <span class="card-excerpt grey-text">Here goes the          truncated description</span>
      <span class="card-price">$ xxx</span>
                    
     </div>
   </div>
</div>
</div>
</div>
</body>

Does anybody have a tipp for me? Kind regards!

gervik88
  • 1
  • 2

1 Answers1

0

Here have many ways to limit line with CSS and with scripts too, see:

Limit text length to n lines using CSS

After all, I decided to use this script:

https://github.com/josephschmitt/Clamp.js/

Community
  • 1
  • 1
rafaelfndev
  • 679
  • 2
  • 9
  • 27