用图像截断文本

Question

我试图根据此截断文本 link

现在我使用class如下

.line-clamp {
  margin: 0 0 1em 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
}

它只适用于文本。这是我的 JSFiddle

问题是我还想在截断的文本中包含一张图片，所以我试图 include image inside div. Even putting image outside the div 在文本下方显示图片。我没有得到正确的输出。我怎样才能把图片放在文本末尾才能看到该图片。

Answer 1

只要把盒子变短，让它漂浮起来就可以了

.line-clamp {
  margin: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  width:90%; float:left;
}

<div class="line-clamp">
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
 </div>
 <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-help-circled-128.png" width="20px" alt="" class="panel-icon" title="image">

用图像截断文本

Truncating text with image

html

css

truncate

image