html5 让显示不完的文字自动省略号 是啥属性

Posted 2023-04-09

p 
    -webkit-line-clamp: 3; // 限制显示的文本的行数为3
    -webkit-box-orient: vertical; // 水平排列<p>，使其不纵向显示
    word-break: break-all; // 使<p>中的文字换行
    overflow: hidden; // 超出的文字部分隐藏
    text-overflow: ellipsis; // 超出的文字部分用...来显示
    display: -webkit-box; // 将<p>变成高度定死，宽度自适应的行内块元素


<p>这里有很长的文字这里有很长的文字这里有很长的文字这里有很长的文字</p>

text-overflow: ellipsis 是变成省略号的选项，但其他属性须存在才能达到想要的效果。

参考技术A text-overflow:ellipsis

过长文字自动换行或者超长省略号显示

　　<div>hghghhgghghghhghghgghghhg</div>

　　css:div{width:100px;} 

　　超长部分省略号显示：/*超出部分不显示*/overflow: hidden;
                　　　　　　/*超出部分省略号显示*/text-overflow: ellipsis;

　　注：如果div中的内容存在空格，则会自动换行　　阻止自动换行：white-space: nowrap;