html - 用图像截断文本

Question

我试图截断基于此 link 的文本

现在我使用类如下

.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 .甚至放图片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">