使用 CSS 实现文本溢出省略号显示

使用 CSS 实现文本溢出省略号显示

要使用 CSS 实现文本溢出时显示省略号,可以通过以下几种方法来实现:

1. 单行文本溢出

对于单行文本溢出显示省略号,可以使用以下 CSS 属性:

.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* 设置元素宽度 */
border: 1px solid #ccc; /* 可选,用于展示边框 */
}

示例 HTML:

<div class="ellipsis">
这是一个示例文本,用于展示如何使用 CSS 实现文本溢出时显示省略号。
</div>

2. 多行文本溢出

对于多行文本溢出显示省略号,可以使用以下 CSS 属性:

.multiline-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* 设置元素宽度 */
border: 1px solid #ccc; /* 可选,用于展示边框 */
line-clamp: 3;
-webkit-line-clamp: 3; /* 设置显示的行数 */
line-height: 20px; /* 设置行高 */
height: 60px; /* 根据行高和行数设置容器高度 */
}

示例 HTML:

<div class="multiline-ellipsis">
这是一个示例文本,用于展示如何使用 CSS
实现多行文本溢出时显示省略号。这是一个示例文本,用于展示如何使用 CSS
实现多行文本溢出时显示省略号。这是一个示例文本,用于展示如何使用 CSS
实现多行文本溢出时显示省略号。
</div>

3. 使用 Flexbox 实现文本溢出

如果你的布局是基于 Flexbox 的,你也可以结合 text-overflow: ellipsis 属性实现文本溢出显示省略号。

.flex-ellipsis-container {
display: flex;
width: 200px; /* 设置容器宽度 */
}
.flex-ellipsis {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc; /* 可选,用于展示边框 */
}

示例 HTML:

<div class="flex-ellipsis-container">
<div class="flex-ellipsis">
这是一个示例文本,用于展示如何使用 CSS 实现文本溢出时显示省略号。
</div>
</div>

以上方法可以帮助你在不同场景下实现文本溢出时显示省略号。单行文本溢出使用 white-space: nowrap;overflow: hidden;text-overflow: ellipsis;,而多行文本溢出则需要结合 -webkit-line-clamp-webkit-box 属性。根据具体的布局需求,还可以结合 Flexbox 等布局方式来实现。

posted @   飞仔FeiZai  阅读(369)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示