hooyantsing's Blog

P34_8_文本溢出与空白处理技巧

字数统计: 158阅读时长: 1 min
2020/04/12

P34 8 文本溢出与空白处理技巧

[HTML]

被包围在

 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

white-space

空格处理

**be76b7c17930cef9db0767d59b534d26.png

**

1
2
3
4
5
6
7
8
//保留空格和换行符
white-space:pre;
white-space:pre-wrap;
//保留换行符
white-space:pre-line;
//禁止换行,文本始终在一行上,会溢出屏幕
white-space:nowarp;

文本溢出的处理

c9c5262be464b0df86b377ec4d443197.png

1
2
3
4
width:; //控制文本占用空间
white-space:nowrap; //禁止换行
overflow:hidden; //超出部分隐藏(只在文本空间显示内容)
text-overflow:ellipsis; //超出部分转变为...

补充:text-overflow默认值clip

CATALOG