在css3列中换行文本

Question

我有一篇很长的文字，我希望以类似报纸的方式展示，例如：在列内，向用户。这提高了可读性。但是，如果一条线长于一列的宽度，则会切断字，例如，隐藏在右侧列后面。我需要在列内包装这些行，以使所有文本可见。

到目前为止，这是我的代码：

<div id="editor" contenteditable>
    Testdiv (insert long text here)
</div>

的CSS：

#editor{
/* span the editor's content automatically above multiple columns: */    
    -webkit-columns: 300px 3; /* Chrome, Safari, Opera */
    -moz-columns: 300px 3; /* Firefox */
    columns: 300px 3;

    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;

/* wrap text that does not fit into one column: <-- Does not work as expected */ 
    word-break: break-all;
    white-space: normal;
}

更新 我上传了问题的图片。 在图像内部，您可以看到新的CSS（仅2列）。但它并没有改变。来自小提琴的代码是我在尝试适应我的用例之前最初发现的，因为它也适用于我。如果重要的话，我正在使用chrome引擎进行渲染。

Fiddle demo

Answer 1

这些词语在下一栏后面没有被切断，它们是以字符为基础的。这就是break-all的作用。请改为break-word。

#editor {
    /* span the editor's content automatically above multiple columns: */
    -webkit-columns: 300px 3;
    /* Chrome, Safari1 Opera */
    -moz-columns: 100px 3;
    /* Firefox */
    columns: 100px 3;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    /* wrap text that does not fit into one column: <-- Does not work as expected */
    word-break: break-word;
    white-space: normal;
}

<div id="editor" contenteditable>
    Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) Testdiv (insert long text here) 
</div>

<强> Fiddle

Answer 2

它可以按照CSS的预期运行，但它现在会破坏行尾的所有单词，这就是你的问题。

我建议删除这些分词和空格设置，然后输入＆＃34;软连字符＆＃34;非常长的单词（通常没有那么长的单词比一行长，而且IMO是一个没有连字符的破碎单词并不好看）：

单词中间的­实体会在必要时破坏该单词，如果该单词符合一行，则保持不可见。

示例：

qwertzuiopüasd­fghjklöäyxcvbnm 

将显示为

qwertzuiopüasdfghjklöäyxcvbnm

当它完全适合一行时，将显示为

qwertzuiopüasd-
fghjklöäyxcvbnm 

当行短于这个词时

。

Answer 3

如果您正在查看可读性视角，请将此CSS添加到您的

 word-break: break-word;
 text-align: justify;

它只会破坏字词而不是字符，并且可以证明适合完整的宽度。

这甚至会将您的长篇文章包含在下一行