CSS控制文本溢出生成省略号

作者: 鲁女女 | 来源:发表于2019-11-26 20:39 被阅读0次

这个东西我真的真的用了不下10次了，但是每次用到了都记不住，我得要记录下来，下次碰到了直接拿来用了（我太难了...）
文本溢出生成省略号需要设置：
1.不能换行显示
2.超出得要隐藏
3.如果文本溢出被隐藏了，得增加省略号
4.块级标签才能生效

HTML部分

<div  class='box'>
这个东西我真的真的用了不下10次了，但是每次用到了都记不住，我得要记录下来，下次碰到了直接拿来用了
</div>

CSS部分

.box{
        width: 380px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #000;
        margin: 100px auto;
        font-size: 16px;
        color: #333;
        /*超出隐藏*/
        overflow: hidden;
        /*不能换行显示*/
        white-space: nowrap;
        /*如果文本溢出被隐藏，增加省略号*/
        text-overflow: ellipsis;
}