css 显示等长的多个文本行

ttvkxqim  于 2023-11-19  发布在  其他
关注(0)|答案(5)|浏览(110)

我想多行文本打破/自动换行,使它出现在一个完美的框。文本不是一个字符串,而是由单个字符连接在一起,如:<span>L</span>
x1c 0d1x的数据
我试过这个CSS,但我得到的结果是你在左边看到的.

body { 
    font-family: monospace;
    width: 200px;
    word-wrap: break-word;
    display: inline-block;
}

字符串
我也试过text-align: justify;,但没有成功。

htzpubme

htzpubme1#

要实现这一点,你需要添加以下代码:

body {
    width: 500px;
    text-align: justify;
}

字符串

flmtquvp

flmtquvp2#

我想这就是你想要的:http://jsfiddle.net/bL50ow0b/1/
text-align: justify就是你需要的。

wfveoks0

wfveoks03#

提供的CSS答案在一定程度上起作用,但不能确保每行都是由n字符组成的,因此可以获得均匀的行外观。我在每个n字符后插入了<br/>。类似于:

for (;;) {
    if (counter >= n) {
            myDiv.appendChild(document.createElement("br"));
            counter = 0;
    }
    counter++;
    myDiv.appendChild(span);
 }

字符串

lpwwtiir

lpwwtiir4#

如果你想让所有的文本行都 * 完全 * 相同的宽度,使用text-align: justify。注意,这会产生不一致的空白。
如果你想让每一行的宽度都 * 大约 * 相同,可以使用text-align: balance。这会导致更多的单词换行,大约等于每行的宽度。请注意,现在的浏览器支持not the best
最后一个防止孤立项的选项是text-align: pretty。请注意,今天的浏览器也支持not the best

gopyfrb3

gopyfrb35#

这是很难理解你的意思是关于跨度与字符串,如果你张贴你的文字,这将是容易的。
这两个版本都可以在这个fiddle:https://jsfiddle.net/eq994mpu/1/中使用以下代码:

p {
    width: 50px;
    word-wrap: break-word;
}

字符串

相关问题