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

深碍√TFBOYSˉ_ 2021-08-19 14:32 620阅读 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 条评论，620人围观）

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

相关阅读

相关 css实现超出部分显示省略号

/\ 显示一行，省略号 \/ white-space: nowrap; text-overflow: ellipsis; overflow:

小咪咪/ 2023年07月19日 08:14/ 0 赞/ 137 阅读

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

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

叁歲伎倆/ 2023年07月01日 08:55/ 0 赞/ 238 阅读

相关 css实现超出部分显示省略号

/\ 显示一行，省略号 \/ white-space: nowrap; text-overflow: ellipsis; overfl

水深无声/ 2023年06月21日 15:29/ 0 赞/ 111 阅读

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

[参考链接][Link 1] 单行超出省略： title \{ overflow: hidden; white-space: nowrap; text-ov

Myth丶恋晨/ 2023年03月13日 01:56/ 0 赞/ 49 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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