在用div+css布局的时候经常会遇到容器被撑开的问题,很多时候我们可以把多出的隐藏掉;但是有些时候我们需要它换行显示,这里以实例的方式列举出强制换行常出现的几种情况。
HTML代码
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
这里我定义了外容器的宽度为200px;如果是中文字符会自动折行,但是数字和英文字符串不会换行。我们添加下面两个属性:
css样式:
Example Source Code
p{
word-warp:break-word; /*内容将在边界内换行*/
word-break:break-all; /*允许非亚洲语言文本行的任意字内断开*/
}
如果要隐藏用:overflow:hidden;
如果是中文字符,会自动换行。如果想单行显示,修改p属性:
Example Source Code
p{
white-space:nowrap; /*强制在同一行内显示所有文本,直到文本结束或者遭遇br对象*/
}
上边是常出现的情况。
附:
word-wrap
语法:word-wrap : normal | break-word
参数:
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生
word-break
语法:word-break : normal | break-all | keep-all
参数:
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
white-space
语法:white-space : normal | pre | nowrap
参数:
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)
转载请注明:睿美印象
网站建设工作室www.ruimeiyx.com