.jpg)
要讓 div 自動(dòng)換行，1. 使用 word-wrap: break-word; 或 overflow-wrap: break-word; 允許長(zhǎng)單詞或 url 在單詞內(nèi)部斷句；2. word-break: break-all; 可在任意字符間斷行，但影響可讀性，慎用；3. white-space: pre-wrap; 保留空格和換行符，適合格式文本；4. flexbox 布局結(jié)合 flex-wrap: wrap; 實(shí)現(xiàn)子元素自動(dòng)換行；5. grid 布局通過 grid-template-columns: repeat(auto-fill, minmax(min-width, 1fr)) 實(shí)現(xiàn)二維自動(dòng)換行；6. 確保 div 有明確寬度，避免父元素寬度異常影響換行效果。
讓 div 自動(dòng)換行，本質(zhì)上就是讓它里面的內(nèi)容，如果超出 div 的寬度，能夠自動(dòng)跑到下一行顯示。這事兒，其實(shí)沒那么復(fù)雜，但也沒那么簡(jiǎn)單，因?yàn)闋砍兜讲煌那闆r。
解決方案：
核心就是使用 css 的 word-wrap、word-break 和 overflow-wrap 屬性，以及靈活運(yùn)用 display 屬性。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
-
word-wrap: break-word; (或者 overflow-wrap: break-word;)
這是最常用的方法，也是我個(gè)人最推薦的。它允許瀏覽器在單詞內(nèi)部斷句，防止長(zhǎng)單詞或 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 的新標(biāo)準(zhǔn)名稱，效果一樣，但建議兩個(gè)都寫上，兼容性更好。
-
word-break: break-all;
這個(gè)屬性更激進(jìn)，它會(huì)在任何字符之間斷句，即使是正常的單詞也會(huì)被切斷。 除非你真的需要，否則不建議使用，因?yàn)樗鼤?huì)影響可讀性。
<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;
這個(gè)屬性會(huì)保留空格和換行符，并且允許文本自動(dòng)換行。 適用于顯示代碼或者需要保留格式的文本。
<div style="width: 200px; white-space: pre-wrap;"> This is a line with spaces and line breaks. </div>
-
使用 display: inline-block; 和 Float: left;
如果 div 里面是多個(gè) inline 元素，例如 span，可以考慮把它們?cè)O(shè)置為 inline-block 并浮動(dòng)。 這樣它們就會(huì)像一個(gè)個(gè)獨(dú)立的塊，自動(dòng)排列，超出寬度就換行。
<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> <!-- 清除浮動(dòng) -->
注意：需要清除浮動(dòng)，否則可能會(huì)影響后面的布局。
-
Flexbox 布局
Flexbox 是一種更現(xiàn)代的布局方式，可以很方便地實(shí)現(xiàn)自動(dòng)換行。
<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; 就是讓子元素自動(dòng)換行的關(guān)鍵。
-
Grid 布局
Grid 布局和 Flexbox 類似，也能實(shí)現(xiàn)自動(dòng)換行，但更適合于二維布局。
<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)); 定義了列的寬度和數(shù)量，auto-fill 會(huì)自動(dòng)填充列，超出寬度就換行。
為什么 div 里的中文沒有自動(dòng)換行？
大多數(shù)情況下，中文會(huì)自動(dòng)換行，除非你設(shè)置了 white-space: nowrap; 或者 overflow: hidden;。 如果中文沒有自動(dòng)換行，檢查一下是否有這些屬性，并移除它們。 另外，確保 div 有明確的寬度，否則它可能會(huì)無限延伸。
word-break 和 word-wrap 有什么區(qū)別？
word-break: break-all; 會(huì)在任何字符之間斷句，包括正常的單詞。 word-wrap: break-word; (或者 overflow-wrap: break-word;) 只會(huì)在單詞內(nèi)部斷句，盡量保持單詞的完整性。 所以，通常情況下，word-wrap 是更好的選擇。
如何讓 div 里的 URL 自動(dòng)換行？
URL 通常很長(zhǎng)，不會(huì)包含空格，所以瀏覽器默認(rèn)不會(huì)在 URL 內(nèi)部斷句。 要讓 URL 自動(dòng)換行，可以使用 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>
為什么設(shè)置了 width: 100%; 的 div 還是沒有自動(dòng)換行？
width: 100%; 表示 div 的寬度等于父元素的寬度。 如果父元素沒有明確的寬度，或者父元素也超出了屏幕寬度，那么 div 可能還是會(huì)超出屏幕寬度，導(dǎo)致內(nèi)容無法自動(dòng)換行。 確保父元素有明確的寬度，或者使用 max-width: 100%; 限制 div 的最大寬度。 另外，檢查是否有 padding 或者 margin 影響了 div 的實(shí)際寬度。
.png)
