css超出部分省略（单行、多行，多种方法实现）

css超出部分省略效果（单行、多行，多种方法实现）

HTML

<p class="text">这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据</p>

1.单行

.text{
    width: 200px;
    border: 1px solid #000000;
    white-space: nowrap;   /* 控制元素不换行 */
    overflow: hidden;      /* p标签超出部分隐藏*/
    text-overflow: ellipsis;   /* 文本超出部分为省略号 */
}

2.多行

• 方法一

  • 使用display: -webkit-box;

  • 优点:简洁明了

  • 缺点:使用了私有属性

.text{
    display: -webkit-box;
    -webkit-box-orient: vertical;/* 子元素排列垂直排列 */
    -webkit-line-clamp: 3;/* 设置从第几行后开始省略 */
    height: 60px;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
}		

• 方法二
  • 给p标签添加伪元素，将伪元素放置为p标签右下角，将背景色填充为渐变，逐渐覆盖文字，实现朦胧的省略效果
  • 优点:css实现
  • 缺点:背景，背景不是纯色或图片不好处理

.texts{
    height: 60px;
    width: 200px;
    padding: 5px;
    border: 1px solid #000000;
    overflow: hidden;
    position: relative;

}
.texts::after{
    content: '';
    position: absolute;
    width: 20%;
    height: 1.2em;
    right: 0;
    bottom: 0;
    background:linear-gradient(to right ,rgba(255,255,255,0) ,rgba(255,255,255,1) 65%);
}

• 方法三
  • 设置before伪元素内容为省略号，设置after伪元素背景色与元素背景色一致。当宽度够长时，before伪元素被after伪元素覆盖；当宽度不够长时，省略号展示，after伪元素被挤到下面。

.text{
    position: relative;
    height: 75px;
    padding: 5px 10px 5px 5px;
    border: 1px solid #000000;
    overflow: hidden;
    text-align: justify;
}
.text::before{
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
}
.text::after{
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 8px;
    background-color: #fff;
}

原理：

before伪元素被定位到p标签的右下角，不管长度够不够都在这个位置。

伪元素是行内元素。after伪元素只设置了right: 0;具体位置还要根据情况来微调，所以会根据p标签宽度上下移动

接下来将overflow: hidden;属性注释,并给after伪元素添加橘色展示位置

宽度足够时

宽度不足时