css - 标签溢出 css3 列

Question

我似乎无法弄清楚如何隐藏、剪辑或截断溢出 CSS3 列的内容。如果我碰巧在 <pre> 中有一个代码片段标记在我的第一列中，它越过我的第二列使文本难以辨认。

对于这种特殊用途，我很乐意剪裁文本、添加省略号或几乎所有不会让内容超出其他栏的内容。

在下面的 JSFiddle 中，我设置了 <pre> 的样式。蓝色的内容，这样你就可以很容易地看到它。如果您愿意，可以使用下面的代码重现它。

http://jsfiddle.net/a4vvcLhv/

.columns {
        -moz-column-width: 150px;
        -webkit-column-width: 150px;
        column-width: 150px;
        overflow: hidden;
}

<div class='columns'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas orci a sem vulputate, nec tincidunt urna aliquet. 

<pre>print "Hello world, how are you doing today? Is this getting cut off yet?</pre>

    Proin consequat velit quis iaculis vulputate. Vestibulum iaculis lorem nec commodo commodo. 

 Etiam sed orci nibh. Quisque rutrum hendrerit lacinia. Praesent quis mattis massa, eget iaculis dui. Praesent faucibus venenatis varius. Vestibulum commodo porta turpis, placerat interdum metus ultricies ut. Vivamus laoreet suscipit purus placerat pulvinar. Etiam tellus nunc
</div>

不只是 <pre>标签，尽管那是我遇到的第一件事，也是我给出的例子。图像会导致同样的问题。我已经用图像更新了 fiddle ( http://jsfiddle.net/a4vvcLhv/1/) 以显示它。

不幸的是，我所看到的看起来可能是设计使然。 W3.org - Overflow inside multicol elements .

---

更多信息:我曾经/正在使用 Firefox 遇到过这种情况。 Chrome 会按我预期/希望显示的方式剪辑内容，但我认为根据上面的 W3.org 链接，Firefox 的方式是正确的。

通过添加以下内容，我可以在 Firefox 中接近所需的行为:

.articlewords {
    -moz-column-width: 220px;
    -moz-column-rule: 1px inset #333;
    -moz-column-gap: 20px;
    -moz-column-break-after: right;
    -moz-column-fill: auto;

    -webkit-column-width: 220px;
    -webkit-column-rule: 1px inset #333;
    -webkit-column-gap: 20px;
    -webkit-column-break-after: right;
    -webkit-column-fill: auto;

    column-width: 220px;
    column-rule: 1px inset #333;
    column-gap: 20px;
    column-break-after: right;
    column-fill: auto;

    height: 100%;
}


.articlewords * { 
    max-width: 150px;
    overflow: hidden;
    height: auto;
}

.articlewords *节具有缩小图像以适合列而不是剪裁图像的副作用。它可能足以满足我的需求，但这不是我想要的行为(在列 brea 处严格剪裁)。

Answer 1

发生这种情况是因为 <pre>标签显示其中的内容预格式化。

而不是 <pre> ，你可以使用这个:

<div style='font-family:"Courier New", Courier, monospace;'> text here </div>

您可以调整格式以使其显示如您所愿:jsfiddle .

编辑: 如果您想坚持使用 <pre>标签，那么您可以预包装空白。你只需要为 <pre> 更新你的 css要包含的标签:

white-space: pre-wrap;

这是 jsfiddle .