Aug26
攻略强制换行与强制不换行
分类: Html/CSS
强制换行与强制不换行问题曾经一度困扰着我,每当遇到换行问题时候那就是痛苦回忆的开始,现在终于痛定思痛,一鼓作气把这个长期顽固问题给解决。
强制换行与强制不换行用到的属性
我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地:
word-wrap语法:
word-wrap: normal(默认) | break-word
各个浏览器均能识别
参数:
normal: 允许内容顶开指定的容器边界。
break-word: 内容将在边界内换行。必要时会触发word-break(注意:请分辨清楚word-break和break-word这俩个是不同的东西,一为属性另为参数)。
说明:
word-wrap是控制是否“为词断行”的,设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
范例:
congratulation这个单词属于长串英文,word-wrap:break-word整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断,这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况,英文单词不被拆开。