【css】css超出两行省略号

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

# css超出两行省略号 #

## 如果div没设置高度 ##

[https://www.cnblogs.com/xiaosuibu/p/8196067.html][https_www.cnblogs.com_xiaosuibu_p_8196067.html]

text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

## 如果div设置了高度 ##

如果div设置了高度，那么想只显示两行的话，就需要把div的高度和两行文字的高度一样，否则还是会显示第三行的。

# less实现方式 #

自动计算当前文本高度

/* 文字省略号(显示几行，每行高度) */
    .text-ellipsis(@lineCount, @lineHeight) { 
      // 控制行高
      line-height: @lineHeight;
      height: calc(@lineHeight * @lineCount);
    
      //  控制显示
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: @lineCount;
      line-clamp: @lineCount;
      -webkit-box-orient: vertical;
      // 控制显示2
      // text-overflow: ellipsis;
      // -webkit-box-orient: vertical;
      // display: block;
      // display: -webkit-box;
      // -webkit-line-clamp: @lineCount;
    }

[https_www.cnblogs.com_xiaosuibu_p_8196067.html]: https://www.cnblogs.com/xiaosuibu/p/8196067.html

发表评论取消回复

表情：

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

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

相关阅读

相关 uni app 文本文字分两行显示，超出用省略号表示

通过css设置文字强制不换行超出用省略号表示很简单： { white-space: nowrap; 文本强制不换行； text-

逃离我推掉我的手/ 2022年12月21日 03:10/ 0 赞/ 1105 阅读

相关文字超出多行省略号显示方法

众所周知，文字超出一行是大家很普遍使用的一个方法 overflow: hidden; text-overflow: ellipsis; whi

痛定思痛。/ 2022年09月30日 00:50/ 0 赞/ 262 阅读

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

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

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

相关 CSS设置超出几行显示省略号

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; \-webkit-line

水深无声/ 2022年09月15日 13:57/ 0 赞/ 237 阅读

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

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

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

相关文本超出两行显示省略号插件Clamp.js

overflow:hidden; text-overflow:ellipsis; display:-webkit-box; \-webkit-box-orient:v

系统管理员/ 2022年05月17日 10:38/ 0 赞/ 267 阅读

相关小程序文字超出两行后显示省略号

小程序文字超出两行后显示省略号 display: -webkit-box; overflow: hidden; text-overflow: ellipsis; wor

迈不过友情╰/ 2022年05月13日 08:12/ 0 赞/ 387 阅读

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

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

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

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

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

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

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

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

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