您现在的位置:首页 >> 前端 >> 内容

CSS处理空白符的方法教程

时间:2018/2/21 11:26:41 点击:

  核心提示:处理空白符white-space属性用来设置文本内空白符(如空格、回车、tab字符等)的处理方式,可选值有 normal | pre | nowrap | pre-wrap | pre-line,默认...

处理空白符

white-space属性用来设置文本内空白符(如空格、回车、tab字符等)的处理方式,可选值有 normal | pre | nowrap | pre-wrap | pre-line,默认值为 normal。该属性出自 CSS1,在 CSS 2.1中新增了属性值 pre-wrap 和 pre-line。不同取值的含义见表 3.6:

表 3.6 white-space属性的取值及含义
属性值 含义
normal 忽略空白符[1],但保留换行符,即碰到容器边界时自动换行
pre 保留所有空白符[2],即便文本超出容器边界也不换行。其行为类似HTML中的
标签
nowrap 忽略空白符,但始终在同一行内显示所有文本,直到文本结束或者遇到标签
pre-wrap 保留所有空白符,但保留换行符,即文本碰到容器边界时自动换行
pre-line 合并空白符序列[3],但保留换行符,即文本碰到容器边界时自动换行

注:[1] 忽略文本开头、结尾及换行符(回车)前面的空白符,并把换行符转换为空格,一行中多个连续的空白符,会被合并成一个空格。[2] 所有空白符保持原样,不作任何处理。[3] 一行中多个连续的空白符,会被合并成一个空格。

white-space属性可以与 overflow 属性结合使用,来控制文本超出容器边界时的处理方式。在 overflow 属性为默认值的情况下,文本超出容器后,容器会出现滚动条。

可以把 white-space属性设置为 nowrap,把 overflow 属性设置为 hidden,让超出容器的文本自动隐藏。如:

p {
    width: 200px; 
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap; 
    border: 1px solid #ccc;
}

Tags:CS SS S处 处理 
作者:网络 来源:歪脖先生的博客