Question

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

对于这个特殊用途，我很乐意剪切文本，添加省略号，或几乎任何会使内容不会运行到其他列的内容。

在下面的JSFiddle中，我将<pre>内容设为蓝色，以便您轻松查看。如果您愿意，可以使用下面的代码重现它。

.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>标签，尽管这是我遇到的第一件事，也是我给出的例子。图像会导致同样的问题。我已经用图像更新了小提琴（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

将white-space: pre-wrap;样式添加到<pre>标记以进行自动换行。

Answer 2

这是因为<pre>标记显示其中的内容预格式化。

您可以使用此代码来代替<pre>：

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

您可以调整格式，使其按照您的要求显示：jsfiddle。

修改：如果您想坚持使用<pre>标签，则可以预先包装空白区域。您只需更新<pre>标记的css即可包含：

white-space: pre-wrap;

这是jsfiddle。

Answer 3

你可以这样做：

pre{
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

文本将被截断，并且将显示小点

the example

或者，如果您想要显示pre的内容，请添加white-space: pre-wrap;

example with pre-wrap

<pre> Tag overflows css3 columns</pre>

3 个答案: