CSS文本溢出省略显示

1.如果文字大于等于两行,用以下代码

            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

注意,此代码是有Bug的,因为文字添加了上下padding,overflow:hidden就不能隐藏全部的文字,它的bug效果如下图:

;

解决办法:把上下padding调小或者增加line-height值


2.如果文字只有一行,用以下代码

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;

此代码并没有上述问题。

你可能感兴趣的:(CSS文本溢出省略显示)