Definitionsliste Seite-an-Seite ohne zu lange Zeilen zu umhüllen

Question

Ich habe eine <dl> enthält kurze <dt> Texte und möglicherweise lange <dd> Texte. Im Layout, wo ich sie bin mit würde Ich mag sie Seite an Seite erscheinen:

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

Jedoch im Fall der DD Inhalt zu lang ist, ich will es einfach abgeschnitten werden (overflow: hidden auf der DL). Ein einfacher Weg wäre, der DD eine maximale Breite zu geben, um zu vermeiden, dass sie zu groß wird, um in eine Linie mit dem festen DT zu passen. Da jedoch die Breite des Containers bereits festgelegt ist und sich über Medienabfragen ändert, würde ich eine Lösung bevorzugen, bei der ich keine feste Breite angeben muss. Die Verwendung eines Prozentsatzes für DT und DD ist ebenfalls keine Lösung, da dies im Fall eines großen Containers Platz in der DT verschwenden würde.

Fiddle zeigt das Problem: http://jsfiddle.net/ThiefMaster/fXr9Q/4/

Aktuelle 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; } 

Answer 1

Update: Ich zuerst Ihre ganze Frage gelesen haben sollte.

die float:left; auf dem <dd>

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

Ein mögliches Problem für Anfänger Verwendung dieser Eigenschaft (wie ich bereits oben angedeutet) Take off ist, dass sie davon ausgehen, dass Leerzeichen Einstellung: nowrap auf einem Element verhindert, dass dieses Element in die nächste Zeile fällt, wenn es Teil einer Gruppe von Floating-Boxen ist. Die Eigenschaft while-space wird jedoch nur auf die Inline-Elemente innerhalb des Elements angewendet, auf das sie angewendet wird, und wirkt sich nicht auf Blockelemente oder den Abstand des Elements selbst aus.

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

---

Old

Wie Sie setzen Breiten auf der dl und dt, hinzufügen diese zum dd:

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

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

Beachten Sie - das ist CSS3 - funktioniert nicht auf älteren Browsern - es ist für Sie zu bewerten, ob dies ein Problem ist oder nicht - die meisten Zeit stört es nicht, dass ältere Browser eine etwas schlechtere Auswahl an Stilen bekommen .

Answer 2

Sie brauchen nicht die Breite sowohl am DT und DD einstellen.

Geben Sie dem DT einfach eine Breite und schweben Sie nach links. Wenn Sie die Overflow-Eigenschaft der DD auf Versteckt setzen, passt sie den gesamten verbleibenden Platz an.

Dann Leerzeichen: nowrap; und Textüberlauf: Ellipse; wird es interessant machen, die Ellipse immer dann hinzuzufügen, wenn der Text zu lang ist.

Dies ist der Weg zu gehen: http://jsfiddle.net/fLPej/