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

淡淡的烟草味﹌ 2022-12-03 01:37 225阅读 0赞

![实例!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200831165220554.png\#pic\_center)!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200831165936224.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size\_16,color\_FFFFFF,t\_70\#pic\_center)][https_img-blog.csdnimg.cn_20200831165220554.png_pic_center_https_img-blog.csdnimg.cn_20200831165936224.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70_pic_center]

.name{ 
          flex: 5;
          padding: 0 10rpx;
    
          // 限制行数
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

[https_img-blog.csdnimg.cn_20200831165220554.png_pic_center_https_img-blog.csdnimg.cn_20200831165936224.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c939c70eba1d4f688abe32698ebb4138.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html --- 文本超出部分显示省略号

在前端开发中，我们往往需要对一些文本内容进行隐藏，达到格式一致，外表美观的效果。如图所示： ![416e781614e44174a1189b6f17d8552e.png]

小灰灰/ 2023年09月28日 10:28/ 0 赞/ 147 阅读

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

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

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

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

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

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

相关 Css文本超出3行自动隐藏显示省略号

Css文本超出3行自动隐藏显示省略号核心样式 less 样式引用方式核心样式 display:-webkit-box; -

爱被打了一巴掌/ 2022年11月27日 08:50/ 0 赞/ 434 阅读

相关 uni-app css 只显示固定的行数，超出部分显示...

我用的是uni-app 框架，使用的元素是view overflow: hidden; -webkit-line-clamp: 1; text-overflow:

曾经终败给现在/ 2022年11月06日 11:53/ 0 赞/ 338 阅读

相关限制文本行数，超出...

如图：超出限制行数显示… ![在这里插入图片描述][2021020211141871.png] 可以用css实现 > 单行文本 .text {

桃扇骨/ 2022年10月26日 12:58/ 0 赞/ 200 阅读

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

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

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

相关 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 阅读