显示多个等长的文本行

Question

我希望将多行文本 break/word 换行，使其显示在一个完美的框中。文本不是字符串，而是由连接在一起的单个字符组成，例如：<span>L</span>

我已经试过了 css，但我得到了您在左侧看到的结果...

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

我也试过text-align: justify;没有成功..

Answer 1

我想这就是您想要的：http://jsfiddle.net/bL50ow0b/1/ ?

text-align: justify就是你所需要的。

Answer 2

很难理解你关于跨度与字符串的意思，如果你发布你的文本会更容易。

两个版本都适用于此 fiddle：https://jsfiddle.net/eq994mpu/1/ 使用以下代码：

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

Answer 3

为此您需要添加以下代码：

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

Answer 4

提供的 CSS 答案有些作用，但不能确保每一行都绝对由 n 个字符组成，从而获得均匀的行外观。我在每个 n 个字符后插入一个 <br/>。类似于：

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

显示多个等长的文本行

Display multiple text lines of equal length

html

css

text