css如何实现强制换行的?

发布时间:2020-08-12编辑:脚本学堂
强制换行在实际应该中是很广泛的,有些文字不强制换行会把窗口撑大,影响布局。下面给大家分享一下css实现强制换行的方法,需要的朋友认真学习一下。

一、问题
一般的元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或
字母或数字,超过容器宽度时就会把容器撑大,不换行。

二、解决方法
以div为例
 

复制代码 代码示例:
div{
word-break:break-all;
word-wrap:break-word;
}
 

三、区别说明
① 关于截断的理解
word-break:break-all
div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文congratulation单词很长,会把单词截断,变成该行末端为congra,下一行为tulation。
word-wrap:break-word
例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

② 支持版本
word-break;break-all 支持版本:IE5以上该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
word-wrap:break-word 支持版本:IE5.5以上内容将在边界内换行。如果需要,词内换行(word-break)也将发生。表格自动换行,避免撑开。

③ 语法
word-break : normal | break-all | keep-all
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

word-wrap : normal | break-word
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。