CSS文本单行或者多行超出区域省略号(...)显示方法

Posted 2022-06-27 huzhuhua

单行超出时，主要用到几个CSS属性:

1.text-overflow : clip | ellipsis ;

clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

2.white-space: nowrap | normal | pre|pre-wrap|pre-line; 

normal :默认。空白会被浏览器忽略。

pre:空白会被浏览器保留。其行为方式类似 html 中的 <pre> 标签。

nowwrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap:保留空白符序列，但是正常地进行换行。

pre-line:合并空白符序列，但是保留换行符。

单行例子：

    div 
        width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    

多行时，主要用以下几个属性

1： display: -webkit-box; 在父元素上设置该属性，子代元素能排列在同一水平上。

2： -webkit-line-clamp: 3;可见行数。

3：-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式 。

多行例子

    div 
        width: 400px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        overflow: hidden;