【css】css超出两行省略号

刺骨的言语ヽ痛彻心扉 2022-09-06 10:23 351阅读 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 条评论，351人围观）

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

相关阅读

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

uni-app 之文字分两行显示超出用省略号表示 vue 将一大串文字分两行显示超出用省略号表示通过css设置文字强制不换行超出用省略号表示: {

朴灿烈づ我的快乐病毒、/ 2023年10月16日 10:30/ 0 赞/ 22 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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