CSS技巧实现多行文本显示省略号

2019-07-18210次阅读css

CSS实现单行溢出显示省略号很是简单:

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Firefox(从68版开始)支持-webkit-line-clamp实现多行文本显示省略号-webkit-line-clamp浏览器兼容性方面支持的还不错。

不过还有另一种CSS方法实现多行文本显示省略号,所以称之为真正的CSS技巧。

 

1、设置line-height行高

假设一个元素的行高为1.4rem,最多只显示三行文本。则把它的最大高度设为1.4rem*3,这里设置了一个全局变量line-height。

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}


2、设置max-height最大高度

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}


3、显示省略号

.truncate-overflow::before {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}


4、当文字内容太短时,把省略号盖住。

用另一个伪元素制作一个与后面背景相同的小盒子,并将它放在省略号的顶部以覆盖它。

.truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0; /* note: not using bottom */
  width: 1rem;
  height: 1rem;
  background: white;
}

注意:这里不要设置bottom(inset-block-end)属性。不然框就会放在内容底部而不是相对父级的底部,这一点很重要。

不信,你可以给框设为红色背景,就可以看到像下面这样:

全部代码如下:

<p>
 多行文本显示省略号
</p>

<p class="truncate-overflow">
  检测JavaScript基本功掌握的怎么样以及平时有没有去深入研究一些方法的实现,简而言之,就是有没有折腾精神。在模拟之前我们先要明白和了解原生call和apply、bind方法是什么
</p>

<p class="truncate-overflow">
  JS压缩后IE低版本不兼容,试试把ugli
</p>

<p class="truncate-overflow">
 IE不标准的地方,unshift方法会返回新数组的长度,但IE6与IE7则返回undefined。
</p>
:root {
  /* Not my favorite that line-height has to be united, but needed */
  --lh: 1.4rem;
}

html {
  max-width: 22rem;
  margin: 2rem auto;
  line-height: var(--lh);
}

.truncate-overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.truncate-overflow::before {
  position: absolute;
  content: "...";
  /* tempting... but shows when lines == content */
  /* top: calc(var(--lh) * (var(--max-lines) - 1)); */
  
  /*
  inset-block-end: 0;
  inset-inline-end: 0;
  */
  bottom: 0;
  right: 0;
}
.truncate-overflow::after {
  content: "";
  position: absolute;
 
  inset-inline-end: 0;
  
  right: 0;
  margin-bottom:-5px;
  /* missing bottom on purpose*/
  width: 1rem;
  height: 1.2rem;
  background: #fff;
}

 

上一篇: 自定义js常用基础库  下一篇: CommonJS模块module.exports与exports区别  

CSS技巧实现多行文本显示省略号相关文章