CSS方式限制文本行換行

我也許有點奇怪的任務，但我相信沒有更好的解決方案。我需要在一些寬度可變的容器中使用<ul>，並且使用固定寬度的內嵌<li>元素。我應該（並且已經找到解決方案）在<li> elem之間放置相同寬度的空格。空間的寬度是動態變化的，並取決於父容器的寬度。再次，這<li>項目具有固定的寬度。CSS方式限制文本行換行

我還應該在這個描述的元素上方放置一些鏈接。由於某些原因，鏈接必須位於其他<ul>元素中。他們還包裹在內線<li>元素。我希望它們位於<li>項目的上方。這可以通過如上設置固定寬度的<li>項來完成。現在，問題是每個鏈接中的文本都有不同的寬度，並且會分成兩行，但我必須將它放在一行中。

所以我想欺騙瀏覽器：文本會溢出<li>項。

.liElem { 
    width: 100px; 
    height: 20px; 
    overflow: visible; 
}

但是，正如你可能已經猜到，文本被打破成兩行，實際上四溢的列表項，而不是靠右側底部。

我想要的效果可以通過在文本中插入  insted空格來完成，如下所示：<li><a href="#">Add to Favourites</a></li>。

所以，我的問題是這樣的：在CSS方式如何使通常的文本不會分成幾行？

來源

2012-05-18 Dmitry Kankalovich

您已設置寬度：100px;在你的CSS，所以如果線的寬度超過100px，它會將文本分成幾行，所以可能你不需要設置寬度。或者你可以使用空白：nowrap;屬性。 – Shreedhar

我必須有列表項目是固定寬度。正如我所說我想欺騙瀏覽器，讓它認爲他將位置元素寬度固定爲寬度。 –

.nobr { white-space:nowrap; }

來源

2012-05-18 06:19:46 Celeritas

適合我的完美作品。非常感謝！ –

CSS方式限制文本行換行

回答

相關問題