Question

我要做的是：我在卡片下面有一个内容div，它应该包含标题的范围，简短的描述范围（必须截断）和价格范围。我希望内容div最多2行文本高，只需要截断描述的范围。

我的代码：

.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>

有人对我说话吗？亲切的问候！

Answer 1

这里有许多限制CSS和使用脚本的方法，请参阅：

Limit text length to n lines using CSS

毕竟，我决定使用这个脚本：

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

截断两个跨度之间的跨度

1 个答案: