帶有浮動元素的CSS自動換行

我有一個固定寬度的工具欄，由引導程序nav-list組成，其中一些列表元素具有右對齊的標籤。帶有浮動元素的CSS自動換行

例如：

<li> 
    <a href="#">abc_test_randomrandom</a> 
    <span class="pull-right label">0000</span> 
</li>

然而，這並不鏈路是長期工作。它擴展以填充整行，並將標籤推到下一行。

我已經提出了一個jsFiddle demo來演示這種行爲。 編輯：現在也是gist。

期望的行爲是在同一行上的abc_test_randomrandom和0000，如果需要，長字符串會換行到下一行。這可能嗎？

來源

2013-01-31 rouge8

我覺得Praveen's solution實際上是一個更好的實現，但要獲得原先要求，display: inline-block，word-wrap: break-word行爲和設置width修復它。

li a {width: 70%; display: inline-block; word-wrap: break-word;}

word wrapping

來源

2013-01-31 19:42:51 rouge8

是的。使用固定的寬度，並給overflow: hidden;多餘的text-ellipsis。

li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;} 
li span {width: 40%; display: inline-block;}

我無法打開jsFiddle。所以看不到確切的問題。

來源

2013-01-31 19:09:36

這不換行多餘文字到下一行雖然喜歡他們要求;它只是用橢圓截斷...？另外，爲了兼容IE7，你需要添加* display：inline; *縮放：1;無論何時使用display：inline-block，因爲IE7無法識別該顯示類型。 –

的確，這不會包裝文本，但我認爲帶有鼠標懸停功能的省略號實際上比我原本想要的更好。 – rouge8

在Bootstrap中，右鍵本質上只是CSS float的包裝。您需要將0000跨度放在標記中的abc_test_randomrandom之前，並且它應該根據需要將錨點包裝爲兩行，因此您的浮動元素位於浮動元素之前。您可能需要將錨點的右側邊距設置爲浮動元素的寬度。我現在無法讓jsFiddle加載，否則我會給你一個更好的例子。我會試着回頭看看。

編輯：我能夠讓你的jsFiddle加載。

如果您將跨度移動到HTML中的錨點之前並添加此CSS，則可以使用。如果您的文本字面上會有下劃線而不是空格，那麼您需要在自己的答案中提到的單詞包裝CSS。

這樣做的好處是它不需要CSS黑客（即用於顯示：內聯塊）在舊版IE中工作，如果這是您的項目的關注。

.nav-list a { display: block; margin-right: 30px; }

screen shot from updated jsFiddle

來源

2013-01-31 19:12:23

帶有浮動元素的CSS自動換行

回答

相關問題