文本溢出 关于 text-overflow 的介绍 以及white-space的介绍

文本溢出 语法：text-overflow: clip | ellipsis; clip不显示省略号，溢出文本被裁剪 cllipsis 显示省略号（省略号相关属性要给文本所在容器设置，不能越级设置） 注：单行文本省略号设置必须满足以下四个条件，缺一不可； ①给容器一个固定的宽度 width: 数值+单位; ②设置文本强制在一行显示 white-space: nowrap; ③容器溢出隐藏 overflow: hidden; 0 Comments

文本溢出

语法：

text-overflow: clip  |  ellipsis;

clip不显示省略号，溢出文本被裁剪


cllipsis 显示省略号（省略号相关属性要给文本所在容器设置，不能越级设置）

注：单行文本省略号设置必须满足以下四个条件，缺一不可；

①给容器一个固定的宽度 width: 数值+单位;

②设置文本强制在一行显示 white-space: nowrap;

③容器溢出隐藏 overflow: hidden;

④文本溢出显示省略号 text-overflow: ellipsis;

eg:

div{
    width: 数值+单位;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


white-space介绍：

语法：

white-space: normal  |  nowrap  |  pre  |  pre-wrap  |  pre-line;

normal: 默认值，常规显示;

nowrap: 强制在一行显示;

pre: 保留空白符，强制在一行显示;

pre-wrap: 保留空白符，换行;

pre-line: 合并空白符，保留换行符;


本文链接：https://my.lmcjl.com/post/20968.html

展开阅读全文

相关文章

4 评论

留下您的评论.