2 回答

TA貢獻1891條經驗 獲得超3個贊
如果你想在一行中有相同數量的字母,你應該使用等寬字體。
如果您還希望在任意兩個字符之間換行 - 使用word-break: break-all(MDN):
body {
font-family: Courier New;
}
.container {
width: 143px;
height: 150px;
border: 2px dashed #333;
margin-bottom: 16px;
}
.container-header {
padding: 8px;
height: 16px;
border-bottom: 2px dashed #333;
}
.container-content {
padding: 8px;
}
.keep-all {
word-break: break-all;
}
.break-all {
word-break: break-all;
}
.break-word {
word-break: break-word;
}
<div class="container">
<div class="container-header">keep-all</div>
<div class="container-content">
abcdefghij klmnopqrstuvwxyz 01234 56789
</div>
</div>
<div class="container">
<div class="container-header">break-all</div>
<div class="container-content break-all">
abcdefghij klmnopqrstuvwxyz 01234 56789
</div>
</div>
<div class="container">
<div class="container-header">break-word</div>
<div class="container-content break-word">
abcdefghij klmnopqrstuvwxyz 01234 56789
</div>
</div>

TA貢獻2011條經驗 獲得超2個贊
也許你可以使用 CSS Word Wrap https://developer.mozilla.org/pt-BR/docs/Web/CSS/word-wrap
添加回答
舉報