CSS：你能防止溢出：隐藏以切断最后一行文本吗？答案

【问题标题】：CSS: Can you prevent overflow: hidden from cutting-off the last line of text?CSS：你能防止溢出：隐藏以切断最后一行文本吗？
【发布时间】：2011-03-14 08:15:49
【问题描述】：

使用 CSS overflow: hidden 时，我经常发现最后一行文本被部分截断。有没有办法防止这种情况出现，以免出现任何部分行。几乎就像一个垂直的自动换行。

【问题讨论】：

提供一个例子？可能会弄乱最后一个元素的行高。
他的意思是内容被中线剪切，所以显示上半部分的字符而不显示下半部分。 AFAIK 没有解决这个问题，除了拧紧行高（这不会是一个跨浏览器的解决方案）
你为什么要使用溢出？包含浮动？还是你真的需要隐藏溢出的东西？

标签： css overflow hidden

【解决方案1】：

您可以使用包装器 div 和多列 css：

.wrapper {
    -webkit-column-width: 150px; //You can't use 100%
    column-width: 150px;
    height: 100%;
}

解决方案示例： http://jsfiddle.net/4Fpq2/9/

2017 年 9 月 21 日更新

在 Firefox 中，此解决方案仍然有效，但在 Chrome 中损坏。最近 Chrome 开始按小部分打破列，如果你设置高度也停止打破内容。在这个 http://jsfiddle.net/4Fpq2/446/ 示例中，我将 hight 更改为 max-height 并显示奇怪的 Chrome 行为。如果您有想法，请写在 cmets 中。

2019 年 3 月 25 日更新

基本上，它甚至适用于 Chrome，但您至少应该有两行。对于具有一定数量可见文本的块，这种方法仍然可以正常工作。

http://jsfiddle.net/ncmo9yge/

【讨论】：

为我工作。 :) 不过，我无法让它与text-overflow:ellipsis 一起工作。这可能吗？
这个方法没有溢出。因此， text-overflow: ellipsis 将不起作用。 CSS 区域可能会有所帮助，但是：caniuse.com/#feat=css-regions :(
@Swen 它仍然适用于 Firefox，请查看更新。
这是一个非常非常巧妙的举动，感谢分享！

【解决方案2】：

一旦您了解了column-width 的工作原理，@stalkerg 的回答就很有意义。

column-width 将内容拆分为列，因此文本的最后一行不适合，它将被移动到下一列。现在的诀窍是使列宽与容器一样宽。容器已溢出：隐藏，因此第二列不会显示。

.box {
    width: 200px;
}
.container {
    -webkit-column-width: 200vw;
    -moz-column-width:    200vw;
    column-width:         200vw;
    height:               100%;
}

【讨论】：

【解决方案3】：

这个解决方案对我有用：https://stackoverflow.com/a/17413577/2540428 本质上是使用适当的填充创建一个包装器 div，并将内容放在主 div 中，您可以在其中编辑其高度并隐藏溢出。有关详细信息，请参阅链接。

【讨论】：

【解决方案4】：

Rob 是正确的。我正在制作一个最大高度为 11em 的 div，最后一行溢出文本只有一半。 white-space: nowrap 只是将最后一行全部消除。

我试过了

white-space: nowrap;

并且Gaby 也是正确的，这也会导致问题。

我想出的最好办法是调整行高和 div 高度，直到截断最少的行

【讨论】：

这只有效，因为您的最后一行是由长换行产生的。如果里面有一个
，它仍然会部分显示..你需要确保div的height可以被它的line-height精确分割..
有道理。我确实将 div 的高度设置为 11em。那会有什么不同吗？

【解决方案5】：

这对我有用：

.wrapper_container{
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.wrapper{
    -webkit-column-width: 300px;
    column-width: 300px;
    height: 100%;
}

【讨论】：

感谢这对我有用。问题是我的 wrapper_container 宽度是 50%，换句话说是变化的。所以在 .wrapper 中，我将 -webkit-column-width: 和 column-width: 更改为 500px，这比我的 .wrapper 容器宽度要大。好吧，它奏效了，但我有点惊讶。你认为这样做安全吗？
其实我的宽度从 220px 到 390px 不等。所以我将 column:width 设置为 219px。外容器宽度最小时为一列，外容器宽度最大时为一列。我对此感觉更好，因为我认为文本不会被截断。如果你有时间，我很想听听你的意见。

【解决方案6】：

存在两个 css3 属性。 1) 分词 & 2) 分词

不要忘记这些是 css3 的新属性。所以老的浏览器不支持这样的属性。

.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}

【讨论】：

【解决方案7】：

只需添加 column-width 属性并设置容器的宽度即可。

【讨论】：

【解决方案8】：

只需使用边框而不是填充。

【讨论】：

你能用一个例子解释一下你应该如何使用边框而不是填充？