html和css实现文本打断换行、自动换行

html和css实现文本打断换行

英文单词强制打断换行

<style>
word-wrap: break-word;
word-break: break-all;
</style>

内容自动换行

<style>


// 连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
white-space: pre-wrap;

// 连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
white-space: normal;

// 和 normal 一样合并空白符，但阻止源码中的文本换行。
white-space: nowrap;

// 连续的空白符会被保留。仅在遇到换行符或 <br> 元素时才会换行。
white-space: pre;

// 连续的空白符会被保留。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。
white-space: pre-wrap;

// 连续的空白符会被合并。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。
white-space: pre-line;

// 与 pre-wrap 的行为相同，除了：
// 任何保留的空白序列总是占用空间，包括行末的。
// 每个保留的空白字符后（包括空白字符之间）都可以被截断。
// 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（min-content 尺寸和 max-content 尺寸）。
white-space: break-spaces;

</style>