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

截断文本与图像

1 个答案: