空格⾃动换⾏html，利⽤CSS使⽂本、空⽩⾃动换⾏
前提：⽂本的⽗容器是块级元素。⾸先，我们来整理⼀下与换⾏有关的3个CSS属性：
word-break
该属性决定⽂本内容超出容器时，浏览器是否⾃动插⼊换⾏符。
属性值：normal：默认换⾏规则——英⽂以词为单位换⾏，连续字符不换⾏，直接溢出⽗元素break-all：⽆视单词，强制在⽗元素边缘位置截断(最省空间，看起来最整齐，但单词可能被从中劈开)。另外连续的标点符号不会换⾏，不知为何。。。keep-all：与normal⼀样，⽽且连中⽇韩的连续⽂字也不换⾏了(有空格分隔时会换⾏)*break-word：这不是⼀个规范属性，只有部分浏览器⽀持，效果同word-wrap: break-word;
word-wrap(overflow-wrap)
该属性决定浏览器是否应该在⼀个⽆法正常断开的单词内部插⼊换⾏符。
属性值：normal：不在单词内部插⼊换⾏符，即换⾏只发⽣在单词间的空格等地⽅，不会截断单词。如果单词超级长，则溢出⽗容器。break-word：『如果没有合适的截断点，那就可能在任意位置截断单词
』。解释⼀下：⾸先尝试正常换⾏(这⼀⾏放不下就放到下⼀⾏)，如果换⾏后还是很长，就在任意位置截断。注：连续的标点符号也会截断。
white-space
该属性决定浏览器如何处理空⽩和换⾏符。
属性值：normal：默认⾏为，换⾏符转换为空⽩，合并连续的空⽩，但必要时换⾏(所谓『必要』对于英⽂来说，指的是⼀个单词后⾯的下⼀个单词在该⾏末尾放不下了，得整个放到下⼀⾏去；对中⽂来说就是⾃然的换⾏)nowrap：其他与normal⼀样，但『必要』的换⾏也不做了，打死不换⾏pre：保留连续的空⽩，遇到换⾏符或br标签时换⾏，但不⾃动插⼊换⾏符pre-wrap：保留连续的空⽩，在遇到换⾏符、时换⾏，『必要』时⾃动插⼊换⾏符pre-line：合并连续的空⽩符，在遇到换⾏符、
时换⾏，『必要』时⾃动插⼊换⾏符
对这3个属性的关系，我的理解如下：
⾸先，white-space决定了浏览器如何渲染换⾏符，如果它选择⽆视换⾏符，那么另外两个属性指导浏览器⾃动插⼊的换⾏符都⽆效；⽽它⾃⼰插⼊的换⾏符不受影响。
其次，word-break优先于word-wrap，因为浏览器⾸先会把单词视为⼀个整体。举个例⼦：
word-break值为normal或keep-all时，可能会有超长的单词溢出容器。此时 word-wrap:break-word 会处理这种情况，将该单词从中间截断，浏览器最终表现出来的效果是break-word。
⽽若word-break值改成了break-all，那么超长的单词会被强制截断，此时word-wrap就没有⽤武之地了。浏览器最终表现出来的效果是break-all。
(PS：如果同时设了break-all和break-word，那么⼀长串标点符号不会换⾏，原因不详。。。为了长串标点能正常换⾏，建议只使⽤break-word)
因此，如果需求是这样的(⼀般是UGC⽂本的展⽰)：换⾏符、空⽩都原样显⽰
html中的5种空格表示⽂本正常换⾏，不能溢出容器
那么需要设置的属性组合为：.text {white-space: pre-wrap;word-wrap: break-word;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。