CSS文本截断 - - >强行一行显示不换行并会出现省略号...

一、单行文本截断 text-overflow

文本溢出经常用到的应该就是 text-overflow:ellipsis 了，只需轻松几行代码就可以实现单行文本截断。

<style>
div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

显示效果：

二、-webkit-line-clamp 实现

<style>
div {
  /* autoprefixer: ignore next */   
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

PS:
 

它需要和 display、 -webkit-box-orient 和 overflow 结合使用：

display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow:ellipsis; 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

三、定位元素实现多行文本截断

<style>
p {
    position: relative;
    line-height: 
    18px;
    height: 
    36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
/* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
</style>