我想多行文本打破/自动换行，使它出现在一个完美的框。文本不是一个字符串，而是由单个字符连接在一起，如：<span>L</span>x1c 0d1x的数据我试过这个CSS，但我得到的结果是你在左边看到的.
<span>L</span>
body { font-family: monospace; width: 200px; word-wrap: break-word; display: inline-block;}
body {
font-family: monospace;
width: 200px;
word-wrap: break-word;
display: inline-block;
}
字符串我也试过text-align: justify;，但没有成功。
text-align: justify;
htzpubme1#
要实现这一点，你需要添加以下代码：
body { width: 500px; text-align: justify;}
width: 500px;
字符串
flmtquvp2#
我想这就是你想要的：http://jsfiddle.net/bL50ow0b/1/？text-align: justify就是你需要的。
text-align: justify
wfveoks03#
提供的CSS答案在一定程度上起作用，但不能确保每行都是由n字符组成的，因此可以获得均匀的行外观。我在每个n字符后插入了<br/>。类似于：
CSS
n
<br/>
for (;;) { if (counter >= n) { myDiv.appendChild(document.createElement("br")); counter = 0; } counter++; myDiv.appendChild(span); }
for (;;) {
if (counter >= n) {
myDiv.appendChild(document.createElement("br"));
counter = 0;
counter++;
myDiv.appendChild(span);
lpwwtiir4#
如果你想让所有的文本行都 * 完全 * 相同的宽度，使用text-align: justify。注意，这会产生不一致的空白。如果你想让每一行的宽度都 * 大约 * 相同，可以使用text-align: balance。这会导致更多的单词换行，大约等于每行的宽度。请注意，现在的浏览器支持not the best。最后一个防止孤立项的选项是text-align: pretty。请注意，今天的浏览器也支持not the best。
text-align: balance
text-align: pretty
gopyfrb35#
这是很难理解你的意思是关于跨度与字符串，如果你张贴你的文字，这将是容易的。这两个版本都可以在这个fiddle：https://jsfiddle.net/eq994mpu/1/中使用以下代码：
p { width: 50px; word-wrap: break-word;}
p {
width: 50px;
5条答案
按热度按时间htzpubme1#
要实现这一点，你需要添加以下代码：
字符串
flmtquvp2#
我想这就是你想要的：http://jsfiddle.net/bL50ow0b/1/？
text-align: justify就是你需要的。wfveoks03#
提供的
CSS答案在一定程度上起作用，但不能确保每行都是由n字符组成的，因此可以获得均匀的行外观。我在每个n字符后插入了<br/>。类似于：字符串
lpwwtiir4#
如果你想让所有的文本行都 * 完全 * 相同的宽度，使用
text-align: justify。注意，这会产生不一致的空白。如果你想让每一行的宽度都 * 大约 * 相同，可以使用
text-align: balance。这会导致更多的单词换行，大约等于每行的宽度。请注意，现在的浏览器支持not the best。最后一个防止孤立项的选项是
text-align: pretty。请注意，今天的浏览器也支持not the best。gopyfrb35#
这是很难理解你的意思是关于跨度与字符串，如果你张贴你的文字，这将是容易的。
这两个版本都可以在这个fiddle：https://jsfiddle.net/eq994mpu/1/中使用以下代码：
字符串