使用图像截断文本

Question

我试图根据此链接截断文本

现在我按如下方式使用类

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

它只对文本工作正常。这是我的JSFiddle

问题是我还想包含带有此截断文本的图像，因此我尝试在div 中包含图像。即使将图像放在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">