css 实现div内显示一行或两行，超出部分用省略号显示

深碍√TFBOYSˉ_ 2021-08-19 14:32 482阅读 0赞

*  div内显示一行，超出部分用省略号显示

white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

*  div内显示两行或三行，超出部分用省略号显示

overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;（行数）
    -webkit-box-orient: vertical;

**概述**

\-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

\-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

兼容性

![/images/20210726/b374c0c68482476fa40bb602bb3f7577.png][https_img-blog.csdn.net_20170214101821444_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTk5fbmFu_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]

[https_img-blog.csdn.net_20170214101821444_watermark_2_text_aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTk5fbmFu_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70_gravity_SouthEast]: /images/20210726/b374c0c68482476fa40bb602bb3f7577.png

发表评论取消回复

表情：

评论列表（有 0 条评论，482人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 实现div内显示固定三行，超出部分用省略号显示

css 实现div内显示两行或三行，超出部分用省略号显示一、div内显示一行，超出部分用省略号显示 white-space: nowrap; o

我就是我/ 2023年01月17日 06:20/ 0 赞/ 175 阅读

相关【CSS用法】css限制一行文字数量，超出部分用省略号显示

为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。 > CSS代码： > > text-overflow:ellip

向右看齐/ 2022年12月21日 00:57/ 0 赞/ 266 阅读

相关多行超出部分显示省略号

var p = document.getElementsByTagName('p')[0].innerHTML; console.log(p);

你的名字/ 2022年09月16日 13:28/ 0 赞/ 256 阅读

相关 CSS控制文字只显示一行，超出部分显示省略号

之前使用过这个例子，现在总结说明一下：先给贴代码： <table> <tbody> <tr> <td><code>01</code></td>

ゞ浴缸里的玫瑰/ 2022年08月11日 16:57/ 0 赞/ 358 阅读

相关 css 文字超出部分显示省略号

设置table固定布局，否则自适应布局会不受控制 table{ 　　table-layout: fixed; } 单行文字：

朱雀/ 2022年04月13日 14:55/ 0 赞/ 389 阅读

相关 css 实现div内显示两行或三行，超出部分用省略号显示

一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overf

太过爱你忘了你带给我的痛/ 2022年04月13日 13:57/ 1 赞/ 791 阅读

相关 css 实现div内显示两行或三行，超出部分用省略号显示

一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; te

冷不防/ 2022年04月08日 19:07/ 0 赞/ 327 阅读

相关 CSS文本超出两行显示显示省略号

html <div class="text">超出两行显示省略号</div> css .text{ display: -webkit-b

深藏阁楼爱情的钟/ 2022年03月26日 15:14/ 0 赞/ 556 阅读

相关 css 实现div内显示一行或两行，超出部分用省略号显示

div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overf

深碍√TFBOYSˉ_/ 2021年08月19日 14:32/ 0 赞/ 483 阅读

相关 css 文本两行显示，超出省略号表示

css 文本两行显示，超出省略号表示重点：text-overflow: ellipsis;只对display：inline；起作用例子：我说说打瞌睡党风建设打

喜欢ヅ旅行/ 2021年07月26日 01:42/ 0 赞/ 561 阅读