在两个跨度之间截断跨度答案

【问题标题】：truncate span in between two spans在两个跨度之间截断跨度
【发布时间】：2017-04-28 11:48:24
【问题描述】：

我想要做的是：我在卡片下有一个内容 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>

有人给我小费吗？亲切的问候！

【问题讨论】：

标签： css truncation

【解决方案1】：

这里有很多方法可以限制 CSS 和脚本的行，请参阅：

Limit text length to n lines using CSS

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

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

【讨论】：