多行文字溢出

最新推荐文章于 2025-05-16 09:48:22 发布

原创最新推荐文章于 2025-05-16 09:48:22 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS属性限制块元素内文本的显示行数，并通过-webkit-line-clamp等属性实现文本多行省略的效果。具体包括display、-webkit-box-orient及text-overflow等属性的搭配使用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.text{width:100px;
display:-webkit-box; overflow:hidden; text-overflow:ellipsis; word-break:break-all;
-webkit-box-orient:vertical; -webkit-line-clamp:2;}
</style>
</head>

<body>
<div class="text">
常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清常用电话--网络单位电话一口清
</div>
</body>

</html>

限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：