css文本溢出的处理方式

在前端开发过程中我们需要对溢出文本做出处理比如溢出文本部分隐藏并添加省略号。

HTML代码：

<div class="single-line">
        怒发冲冠注，凭栏处、潇潇注雨歇。抬望眼、仰天长啸注，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
        靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙注。
    </div>
    <div class="multi-line">
        怒发冲冠注，凭栏处、潇潇注雨歇。抬望眼、仰天长啸注，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
        靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙注。
    </div>

CSS代码：

        .single-line{
            border: 2px solid #ccc;
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            color: #f40;
            white-space: nowrap;/*文本不允许换行*/
            overflow: hidden;/*溢出隐藏*/
            text-overflow: ellipsis;/*文本溢出处理方式*/
        }
        .multi-line{
            border: 2px solid #ccc;
            width: 200px;
            height: 150px;
            line-height: 30px;
            overflow: hidden;
            /*改变盒子显示类型*/
            display:
             -webkit-box;/*使用wenkit浏览器内核*/
             -webkit-line-clamp: 5;/*整个多行文本区域，一共显示的函数*/
             -webkit-box-orient: vertical;/*表示文本排列的方向*/
        }

经过css简单的设置就能在前端处理文本溢出的问题，使用-webkit方法处理虽然有兼容问题，但是问题不大。

推荐

推荐资讯

热门资讯