用css控制字数,超出部分显示省略号

2019-02-13 18:24 Html+Css 149 梁俊威

有时候需要控制下文字数,不然就会溢出,页面就会变样不美观。这时我们就可以用css控制字数,超出部分显示省略号。可以不换行,超出部分显示省略号,也可以可以换行,多行,超出部分显示省略号。

1、不换行,超出部分显示省略号

CSS部分:

.box{
    width:260px;
    /*超出部分就隐藏*/
    overflow:hidden;
    /*不换行设定*/
    white-space:nowrap;
    /*超出部分的文字显示省略号*/
    text-overflow:ellipsis;
}

HTML部分:

<div class="box">用css控制字数,超出部分显示省略号用css控制字数,超出部分显示省略号</div>


2、可以换行,多行,超出部分显示省略号

CSS部分:

.box{
    width:260px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*2行*/
    -webkit-line-clamp: 2;
    overflow: hidden;
}

HTML部分:

<div class="box">用css控制字数,超出部分显示省略号用css控制字数,超出部分显示省略号</div>


若无特殊说明,本站点所有内容均为原创,转载请说明出处!

原文链接:https://www.ljwei.com.cn/read/107.html

QQ客服

QQ客服

微信客服

微信客服

微信客服二维码
意见反馈

意见反馈

一键置顶