换行的属性是word-wrap,它有两个值:
word-wrap: normal; //默认,不换行 word-wrap: break-word; //强制换行
当设置为break-word时,文字会在容器宽度不够时进行强制换行,从而避免文字溢出容器。下面是一个例子:
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ... </p></div>
在上述例子中,即使div的宽度只有200px,文字也会在不溢出容器的前提下,自动换行成多行,不再影响布局。
需要注意的是,在word-wrap属性使用的时候,若待换行的文字含有连续的无空格字符(如长单词、URL等),仍可能撑开容器,此时可能需要使用更灵活的方案,如截取文字或限制输入字符数。