如何实现固定高度新闻组件中图片旁文本的省略号截断？

我需要创建一个固定高度的新闻展示组件，包含标题、图片、文本和作者信息，要求图片居左，文本环绕排布。容器高度固定，希望文本超出时以省略号（...）截断，而非溢出或突然中断。

目前仅在.article-content类中添加overflow:clip;得到两种效果：

• 添加overflow: clip;后的效果：
• 未添加overflow: clip;的效果：

如何实现文本的省略号截断？

原有CSS代码 #

.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;
}

原有HTML代码 #

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

针对浮动图片+固定高度容器的文本截断需求，可通过弹性布局配合多行文本截断属性实现，步骤如下：

1. 调整.article为弹性布局，确保作者信息固定在容器底部：

.article {
    height: 220px;
    border: solid 2px red;
    display: flex;
    flex-direction: column;
}

2. 让.article-content占满容器剩余空间，设置溢出隐藏并转为弹性列布局：

.article-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

3. 对.article-text应用多行文本截断属性，同时保留图片环绕效果：

.article-text {
    text-align: justify;
    margin: 5px;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 根据容器高度调整显示行数，示例设为6行 */
    -webkit-line-clamp: 6;
    text-overflow: ellipsis;
}

4. 调整作者信息的定位，确保其始终在底部右侧：

.article-author {
    margin: 5px;
    font-weight: bold;
    align-self: flex-end;
}

修改后的完整CSS代码 #

.article {
    height: 220px;
    border: solid 2px red;
    display: flex;
    flex-direction: column;
}

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

.article-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.article-text {
    text-align: justify;
    margin: 5px;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    text-overflow: ellipsis;
}

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

.article-author {
    margin: 5px;
    font-weight: bold;
    align-self: flex-end;
}

效果说明 #

• 弹性布局确保容器内各元素高度分配合理，作者信息不会被文本覆盖；
• -webkit-line-clamp系列属性实现多行文本截断，超出部分自动显示省略号；
• 图片的浮动环绕效果完全保留，文本会在固定高度范围内自动适配截断。

内容的提问来源于stack exchange，提问作者Plastic