要让 div 自动换行，1. 使用 word-wrap: break-word; 或 overflow-wrap: break-word; 允许长单词或 url 在单词内部断句；2. word-break: break-all; 可在任意字符间断行，但影响可读性，慎用；3. white-space: pre-wrap; 保留空格和换行符，适合格式文本；4. flexbox 布局结合 flex-wrap: wrap; 实现子元素自动换行；5. grid 布局通过 grid-template-columns: repeat(auto-fill, minmax(min-width, 1fr)) 实现二维自动换行；6. 确保 div 有明确宽度，避免父元素宽度异常影响换行效果。
让 div 自动换行，本质上就是让它里面的内容，如果超出 div 的宽度，能够自动跑到下一行显示。这事儿，其实没那么复杂，但也没那么简单，因为牵扯到不同的情况。
解决方案：
核心就是使用 CSS 的 word-wrap、word-break 和 overflow-wrap 属性，以及灵活运用 display 属性。
立即学习“前端免费学习笔记（深入）”；
word-wrap: break-word; (或者 overflow-wrap: break-word;)
这是最常用的方法，也是我个人最推荐的。它允许浏览器在单词内部断句，防止长单词或 URL 撑破 div。
This is a very long word that will break to the next line: supercalifragilisticexpialidocious.
overflow-wrap 是 word-wrap 的新标准名称，效果一样，但建议两个都写上，兼容性更好。
word-break: break-all;
这个属性更激进，它会在任何字符之间断句，即使是正常的单词也会被切断。 除非你真的需要，否则不建议使用，因为它会影响可读性。
This is a very long word that will break to the next line: supercalifragilisticexpialidocious.
white-space: pre-wrap;
这个属性会保留空格和换行符，并且允许文本自动换行。 适用于显示代码或者需要保留格式的文本。
This is a line with spaces andline breaks.
使用 display: inline-block; 和 float: left;
如果 div 里面是多个 inline 元素，例如 span，可以考虑把它们设置为 inline-block 并浮动。 这样它们就会像一个个独立的块，自动排列，超出宽度就换行。
Item 1 Item 2 Item 3
注意：需要清除浮动，否则可能会影响后面的布局。
Flexbox 布局
Flexbox 是一种更现代的布局方式，可以很方便地实现自动换行。
Item 1Item 2Item 3
flex-wrap: wrap; 就是让子元素自动换行的关键。
Grid 布局
Grid 布局和 Flexbox 类似，也能实现自动换行，但更适合于二维布局。
Item 1Item 2Item 3
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); 定义了列的宽度和数量，auto-fill 会自动填充列，超出宽度就换行。
为什么 div 里的中文没有自动换行？
大多数情况下，中文会自动换行，除非你设置了 white-space: nowrap; 或者 overflow: hidden;。 如果中文没有自动换行，检查一下是否有这些属性，并移除它们。 另外，确保 div 有明确的宽度，否则它可能会无限延伸。
word-break 和 word-wrap 有什么区别？
word-break: break-all; 会在任何字符之间断句，包括正常的单词。 word-wrap: break-word; (或者 overflow-wrap: break-word;) 只会在单词内部断句，尽量保持单词的完整性。 所以，通常情况下，word-wrap 是更好的选择。
如何让 div 里的 URL 自动换行？
URL 通常很长，不会包含空格，所以浏览器默认不会在 URL 内部断句。 要让 URL 自动换行，可以使用 word-wrap: break-word; 或者 overflow-wrap: break-word;。
为什么设置了 width: 100%; 的 div 还是没有自动换行？
width: 100%; 表示 div 的宽度等于父元素的宽度。 如果父元素没有明确的宽度，或者父元素也超出了屏幕宽度，那么 div 可能还是会超出屏幕宽度，导致内容无法自动换行。 确保父元素有明确的宽度，或者使用 max-width: 100%; 限制 div 的最大宽度。 另外，检查是否有 padding 或者 margin 影响了 div 的实际宽度。
以上就是html中怎么让div自动换行 div换行布局方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1565536.html
微信扫一扫 
支付宝扫一扫 
