要让 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。<div style="width: 200px; word-wrap: break-word;"> This is a very long word that will break to the next line: supercalifragilisticexpialidocious. </div>
overflow-wrap是word-wrap的新标准名称，效果一样，但建议两个都写上，兼容性更好。 -
word-break: break-all;这个属性更激进，它会在任何字符之间断句，即使是正常的单词也会被切断。 除非你真的需要，否则不建议使用，因为它会影响可读性。
<div style="width: 200px; word-break: break-all;"> This is a very long word that will break to the next line: supercalifragilisticexpialidocious. </div>
-
white-space: pre-wrap;这个属性会保留空格和换行符，并且允许文本自动换行。 适用于显示代码或者需要保留格式的文本。
<div style="width: 200px; white-space: pre-wrap;"> This is a line with spaces and line breaks. </div>
-
使用
display: inline-block;和float: left;如果
div里面是多个inline元素，例如span，可以考虑把它们设置为inline-block并浮动。 这样它们就会像一个个独立的块，自动排列，超出宽度就换行。<div style="width: 200px;"> <span style="display: inline-block; float: left; width: auto;">Item 1</span> <span style="display: inline-block; float: left; width: auto;">Item 2</span> <span style="display: inline-block; float: left; width: auto;">Item 3</span> </div> <div style="clear: both;"></div> <!-- 清除浮动 -->
注意：需要清除浮动，否则可能会影响后面的布局。
Ecshop韩都衣舍2014最新豪华版下载雕鹰团队二次开发服装类商城模板；ecshop 韩都衣舍2014最新豪华版+专题频道页面功能；采用DIV+CSS布局，并优化了很多代码，使模板打开速度更快，更利于SEO搜索引擎优化。顶级分类页调用该分类下精品商品排行，左右切换滚动特效，头部购物车鼠标移入显示购物车商品，首页分类下方调用各分类商品，并且商品有立即购买功能，列表页左侧商品分类默认商品展开状态，点击哪个分类进入此页面，那么这个分类处于展开
-
Flexbox 布局
Flexbox 是一种更现代的布局方式，可以很方便地实现自动换行。
<div style="display: flex; flex-wrap: wrap; width: 200px;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
flex-wrap: wrap;就是让子元素自动换行的关键。 -
Grid 布局
Grid 布局和 Flexbox 类似，也能实现自动换行，但更适合于二维布局。
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); width: 200px;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
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;。
<div style="width: 200px; word-wrap: break-word;"> <a href="https://www.example.com/very/long/url/that/should/break/to/the/next/line">https://www.example.com/very/long/url/that/should/break/to/the/next/line</a> </div>
为什么设置了 width: 100%; 的 div 还是没有自动换行？
width: 100%; 表示 div 的宽度等于父元素的宽度。 如果父元素没有明确的宽度，或者父元素也超出了屏幕宽度，那么 div 可能还是会超出屏幕宽度，导致内容无法自动换行。 确保父元素有明确的宽度，或者使用 max-width: 100%; 限制 div 的最大宽度。 另外，检查是否有 padding 或者 margin 影响了 div 的实际宽度。
