CSS：你可以防止溢出：隐藏切断最后一行文本？

当使用CSS overflow：hidden时，我经常发现最后一行文本被部分截断。有没有办法来防止这种情况发生，以免任何部分线条不显示。几乎就像一个垂直的单词包装。CSS：你可以防止溢出：隐藏切断最后一行文本？

2010-07-10 Get the Jaws of Life

提供一个例子吗？也许在最后一个元素上混乱了线条高度。 – 2010-07-10 20:58:25

他意味着内容被剪切中间，所以上半部分的字符显示，但不是底部。AFAIK有没有解决这个问题，除了拧行高（这不会是一个跨浏览器解决方案） – Rob 2010-07-10 21:02:13

为什么你使用溢出？包含浮游物？还是你真的需要隐藏满溢的东西？ – 2010-07-10 21:02:57

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

我试图

white-space: nowrap;

和Gaby也是正确的，这会导致问题太多。

我想出了用行高和DIV高度摆弄直到行最少被切断的最佳

来源

2010-07-10 21:07:03

这只适用于你的最后一行是由长线包装产生的。如果其中有一个
，它仍然会部分显示。您需要确保div的“高度”可以精确地除以它的“行高”。 – 2010-07-10 21:10:26

有意义。我确实使div的高度像11em一样。这会有什么不同吗？ – 2010-07-11 15:33:58

该解决方案为我工作：https://stackoverflow.com/a/17413577/2540428 本质上创建适当的填充包装DIV并把内容放在你编辑它的高度的主div中并隐藏溢出。请参阅链接了解更多详情。

来源

2013-07-01 21:23:50 seon

您可以使用包装的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/示例中，我将高度更改为最大高度并显示奇怪的Chrome行为。如果您有想法，请在评论中写下。

来源

2014-02-13 13:20:50 stalkerg

适合我。 :)但我无法让它与'text-overflow：ellipsis'一起工作。那可能吗？ – 2015-01-21 10:54:50

在这种方法中，没有溢出。因此，文本溢出：省略号将不起作用。 CSS地区也许可以帮助，但：http://caniuse.com/#feat=css-regions :( – stalkerg 2015-01-22 11:55:55

太糟糕了，这不适用于100％:( – Swen 2017-07-28 15:43:56

-1

存在两个css3属性。 1）分词& 2）word-arap

不要忘记这些都是css3的新属性。所以旧版浏览器不支持这种属性。

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

来源

2014-08-02 19:54:21

[Not working]（http://jsfiddle.net/8takLekq/）在IE，Chrome或Firefox中。 – 2015-01-21 13:22:54

一旦你了解column-width工作，@ stalkerg的回答如何使一个很大的意义。

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

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

来源

2016-03-09 13:47:11 StR

只需添加column-width属性并设置容器的宽度，就可以工作。

来源

2016-05-25 11:04:47

为我工作：

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

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

来源

2018-02-23 10:47:51

CSS：你可以防止溢出：隐藏切断最后一行文本？

回答

相关问题