[分享]css3多wordwarp

 CSS3多行文本换行 为了能够更好地呈现多行文本，并且能够使多行文本有良好的排版，CSS3提供了多行文本换行的功能。 多行文本由于长度比较长，如果不进行任何处理，就会在页面上出现横向滚动条，导致页面...

 CSS3多行文本换行
为了能够更好地呈现多行文本，并且能够使多行文本有良好的排版，CSS3提供了多行文本换行的功能。
多行文本由于长度比较长，如果不进行任何处理，就会在页面上出现横向滚动条，导致页面显示效果不理想。
因此，在进行多行文本的排版时，我们需要考虑如何使得多行文本在超出父元素的大小时自动换行。
CSS3中实现多行文本换行有两个属性：word-wrap和white-space。
Word-wrap属性
该属性用于指定当文本溢出时是否要自动换行。
当该属性值为normal时，表示在必要时会在单词之间换行；当该属性值为break-word时，则允许在单词内部换行。
例如：

p {  
    word-wrap:break-word;  
} 

上述代码中，p元素采用break-word值，即使单词太长超出元素宽度，也会在单词内部进行换行。
White-space属性
该属性用于指定元素内的空白字符的处理方式。
当该属性值为normal时，表示忽略多个空格、换行符和制表符；当该属性值为pre时，则保留页面中原来的空格、换行符和制表符等字符。
例如：

p {  
    white-space:pre-wrap;  
} 

上述代码中，p元素采用pre-wrap值，即保留页面中原来的空格、换行符和制表符等字符。
总结
通过word-wrap和white-space属性，我们可以实现多行文本的自动换行和空白字符的保留，从而达到更好的文本排版效果。
同时，这也是CSS3为我们提供的一项非常实用的文本排版功能，非常值得我们学习和使用。