一個簡單的 jsfiddle 片段在這里：https ://jsfiddle.net/aov67q3e/ 由于某種原因，文本沒有換行。
<div style="display:flex; border: 1px solid red; max-width: 200px;">
<div style="padding: 8px;display: flex;flex-wrap: wrap;">
<div style="padding: 8px 0px;"> You are 25 Degrees away. </div>
<div style="padding: 8px 0px;"> ladkfjdlakdjflkajklfdjakljflajlkfdalkjflkajklfjalkjfljalf>ladkfjdlakdjflkajklfdjakljflajlkfdalkjflka33e23234jklfjalkjfljalf
</div>
uj5u.com熱心網友回復：
只需添加“自動換行：斷字；” 到父 div，文本將換行。
我還建議添加“box-sizing: border-box;” 這樣你就可以保持200px的寬度。
下面是代碼：
<div style="max-width: 200px;
height: fit-content;
border: 1px solid red;
word-wrap: break-word;
box-sizing: border-box;
padding: 8px;">
<div style="display: flex;flex-direction: column;gap: 8px;">
<div>You are 25 Degrees away.</div>
<div> ladkfjdlakdjflkajklfdjakljflajlkfdalkjflkajklfjalkjfljalf>ladkfjdlakdjflkajklfdjakljflajlkfdalkjflka33e23234jklfjalkjfljalf
</div>
</div>
</div>uj5u.com熱心網友回復：
在這種情況下，包裝文本并不是真正的 flexboxes 作業。
首先，您需要設定父 div 的寬度。100%會做。其次，您需要設定最近的 div 的寬度，并指定它應該打破沒有空格的單詞。
它可能是什么樣子（以您為例）
<div style="display:flex; border: 1px solid red; max-width: 200px;">
<div style="padding: 8px;display: flex; flex-wrap: wrap; width: 100%;">
<div style="padding: 8px 0px;"> You are 25 Degrees away. </div>
<div style="padding: 8px 0px; width: 100%; word-wrap: break-word;">ladkfjdlakdjflkajklfdjakljflaj lkfdalkjflkajklfjalkjfljalf>ladkfjdlakdjflkajklfdjakljflajlkfdalkjflka33e23234jklfjalkjfljalf
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/401872.html