css 实现文本两行展示，超出部分...展示

灰太狼 2021-07-25 13:38 981阅读 0赞

## css 两行展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]

// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。
    
    //文本超出部分以...形式展示
    text-overflow: -o-ellipsis-lastline;
    //整体超出部分隐藏
    overflow: hidden;
    //文本超出部分以...形式展示，同第一行样式代码
    text-overflow: ellipsis;
    //display 块级元素展示
    display: -webkit-box;
    //设置文本行数为2行
    -webkit-line-clamp: 2;
    //设置文本行数为2行
    line-clamp: 2;
    //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-box-orient: vertical;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/a86e2e24210a41098a227252fdf6450a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/0c954e58ca47417089500a315a8863c9.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css之限制文本行数，超出部分显示 “...“

![实例!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200831165220554.png\pic\_center)!\[在这里插

淡淡的烟草味﹌/ 2022年12月03日 01:37/ 0 赞/ 225 阅读

相关 vue 文本超出宽度超出部分隐藏，鼠标移入展示全部组件封装

在 VUE + ElementUI 的项目里面，标题内容超出固定宽度超出部分隐藏，鼠标移入显示全部内容。由于项目里面这一类的需求比较多，这里我考虑封装一下，方便使用。组件封

灰太狼/ 2022年09月06日 12:29/ 0 赞/ 389 阅读

相关【css】css超出两行省略号

css超出两行省略号如果div没设置高度 [https://www.cnblogs.com/xiaosuibu/p/8196067.html][https_www

刺骨的言语ヽ痛彻心扉/ 2022年09月06日 10:23/ 0 赞/ 328 阅读

相关 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:文本多行超出隐藏

一定要给定宽度，其中`line-clamp`为有几行，最好再加上行高与高度 width:40px; display: -webkit-box; -we

ゞ浴缸里的玫瑰/ 2021年12月21日 15:45/ 0 赞/ 436 阅读

相关 css 文本超出部分省略号

1. 单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.

梦里梦外;/ 2021年09月17日 04:34/ 0 赞/ 417 阅读

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

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

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

相关 css 实现文本两行展示，超出部分...展示

css 两行展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

灰太狼/ 2021年07月25日 13:38/ 0 赞/ 982 阅读