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：你可以防止溢出：隱藏切斷最後一行文本？

回答

相關問題