截断图像周围浮动的文本

Question

我正在努力解决 HTML/CSS 布局问题。

我需要创建一个显示新闻报道内容的动态组件，我的目标是获得包含标题、图像、文本和作者的预定义大小（高度）组件。图像需要放置在左侧，文本漂浮在图像周围。

考虑到容器的固定高度，我希望文本被省略号（...）截断，而不是溢出其 div 或突然中断

我得到的是以下两个版本，不同之处仅在于添加了属性“overflow:clip;”到文章内容类：

如何获得省略号？

我附上一个例子：FIDDLE

.article {
    height: 220px;
  border: solid 2px red;
}

.article-image {
margin: 10px;
  float: left;

}

.article-content {
    overflow:clip;
}

.article-text {
text-align: justify;
margin: 5px;
height:160px;
    
}

.article-title {
  font-weight: bold;
}

.article-author {
  margin: 5px;
  font-weight: bold;
  float: right;
}

 <div class="article">
    <img src="https://placehold.it/250x125?text=Article-Image" class="article-image" alt="" width="250px" height="125px"/>
    <div class="article-content">
    <div class="article-title">
    Article TITLE
    </div>
      <p class="article-text">Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.
      Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.
      Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.
      Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.
         Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.
            Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.Dolor amet elit exercitation aliquip. Enim reprehenderit excepteur dolore do exercitation pariatur exercitation occaecat officia qui pariatur aliqua qui. Ad commodo ut ipsum ea tempor excepteur labore exercitation magna. Mollit commodo ullamco magna ipsum ullamco est minim. Qui reprehenderit cillum cillum aute consequat voluptate minim excepteur.</p>
    </div>
    <div class="article-author">
    Autor Name
    </div>
  </div>

Answer 1

您可以使用 css 属性实现预期的行为

line-clamp

。

在

.article

类中添加以下代码

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical; 

这将在行钳位值之前显示省略号。

PS：相应更新

-webkit-line-clamp

值。