定義列表並排側不纏繞過長的線路

我有一個<dl>含短<dt>文本，並可能長期<dd>文本。在我使用他們的佈局，我想他們出現並排側：定義列表並排側不纏繞過長的線路

/==============\ 
|DT DD........| 
|DT DD........| 
|DT DD........| 
\==============/

然而，萬一DD的內容太長我只是希望它被截斷（overflow: hidden上DL）。一個簡單的方法就是給DD一個最大寬度，以避免它太大而不能適應固定大小的DT。但是，由於容器的寬度已經固定，並且通過媒體查詢進行了更改，所以我更喜歡一種解決方案，我不需要指定DD的固定寬度。對DT和DD使用百分比也不是一個解決方案，因爲如果是大容器，這會浪費DT中的空間。

小提琴顯示問題：http://jsfiddle.net/ThiefMaster/fXr9Q/4/

當前CSS：

dl { border: 1px solid #000; margin: 2em; width: 200px; overflow: hidden; } 
dt { float: left; clear: left; width: 50px; color: #f00; } 
dd { float: left; color: #0a0; white-space: nowrap; }

來源

2012-09-29 ThiefMaster

使用

– Enve

好吧，從內容的語義定義列表會更合適。 – ThiefMaster

更新：我應該先閱讀你的整個問題。

取下上<dd>

http://jsfiddle.net/fXr9Q/26/

一個可能的問題的float:left;使用該屬性初學者（如我已經上面提到的）是，他們假設設置空白：一個元件上NOWRAP如果它是一組浮動框的一部分，將阻止該元素下降到下一行。但是，空白屬性只適用於應用於元素的內聯元素，不會影響塊元素或元素本身的間距。

http://www.impressivewebs.com/css-white-space/

老

在dl和dt，正如你所設置的寬度增加這給dd：

dd{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 150px; 
}

http://jsfiddle.net/fXr9Q/15/

請注意 - 這是CSS3--不適用於舊版瀏覽器 - 它是爲了評估這是否是個問題 - 大多數時候我不介意舊版瀏覽器的風格略差。

來源

2012-09-29 13:57:39 Harry

謝謝，但在這種情況下，您確實指定了'dd'的固定寬度，我明確聲明這不是我正在尋找的解決方案。 – ThiefMaster

我已更新我的回答 – Harry

非常感謝！我也有一個問題，即dt和dd元素都是左移的，但是出於某種原因，他們在這樣做時溢出了div。這固定了它。謝謝！ –

你不需要設置寬度都在DT和DD。

只要給DT的寬度，和左浮動。將DD的溢出屬性設置爲隱藏，將讓它適合所有可用的剩餘空間。

然後空白：NOWRAP;和文本溢出：省略號;當文本太長時，會使其更加喜歡增加省略號。

這是要走的路：http://jsfiddle.net/fLPej/

來源

2012-09-29 14:15:27

定義列表並排側不纏繞過長的線路

回答

相關問題