CSS - 如何修剪文本輸出？

我有一個任意數量的文本將被顯示在一個密閉的空間。CSS - 如何修剪文本輸出？

如何修剪輸出，以便不會顯示「超出」框，或如何強制框創建垂直滾動條？

2011-04-15 warren

overflow屬性。您可以將該值設置爲hidden以隱藏數據，並將scroll設置爲滾動數據。

<div class="text">this is some text that would be very long...</div> 

//Hidden 
.text 
{ 
    overflow: hidden; 
    width: 50px; 
    height: 50px 
} 
//Scroll  
.text 
{ 
    overflow: scroll; 
    width: 50px; 
    height: 50px 
}

來源

2011-04-15 17:53:56

看看overflow。 overflow: hidden剪輯內容，overflow:Scroll添加滾動條。

來源

2011-04-15 17:54:23 Ryan

我怎樣才能調整輸出，使無論是「超越」的盒子是不是顯示

使用overflow: hidden

我怎麼能強制對話框來創建垂直滾動條？

使用overflow: auto。要使用此功能，不過，請確保您有包裝盒上的

來源

2011-04-15 17:54:47

通常指定的寬度/高度「溢出：汽車」，如果有一組高度/寬度應該工作。你可以用'overflow：scroll'強制滾動條。你可以用'overflow：hidden'隱藏任何東西

與CSS樣式溢出的關鍵是高度和寬度都必須通過瀏覽器，以確定它知道什麼時候開始溢出。

來源

2011-04-15 17:54:49

對於HTML：

<div id="smallBoxWithLotsOfText">There is way more text in here than what 
    I have typed. I mean, this text is long. There is lots of it. 
    You can't even imagine how long this text is gonna get. No joking. 
    It's long; it's very, very long. It keeps going, and going, and going. 
    It's the Energizer Bunny of text. Like, seriously dude. It's crazy. 
    Absolutely crazy. 
</div>

嘗試CSS：

#smallBoxWithLotsOfText { 
    width: 100%; 
    height: 100px; 
    overflow: auto; 
}

height屬性告訴箱有多高是。 overflow屬性告訴框在內容變大時添加滾動條，但不總是有滾動條（如scroll那樣）。

您可以see this in action。

來源

2011-04-15 17:54:54 justkt

諷刺的是，你的文字不夠長。我不得不減小窗口的大小以使滾動條出現。 – thirtydot 2011-04-15 18:37:56

您可以嘗試使用省略號通過添加CSS如下：

.truncate { 
    width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

更多的方式來修剪文本和顯示省略號可以在這裏找到： http://blog.sanuker.com/?p=631

來源

2016-01-05 04:13:46 Roy

CSS - 如何修剪文本輸出？

回答

相關問題