Definition Liste nebeneinander ohne Umbruch zu langer Zeilen

Ich habe eine <dl> mit kurzen <dt> Texte und möglicherweise lange <dd> Texte. Im layout, an dem ich bin mit Ihnen ich möchte Ihnen zu erscheinen side-by-side:

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

Jedoch bei den DD ' s Inhalt ist zu lang, ich will einfach nur, dass es abgeschnitten (overflow: hidden auf der DL). Eine einfache Möglichkeit wäre, dass der DD eine max-Breite zu vermeiden, zu kommen, zu groß, um fit in einer Linie mit der festen Größe von DT. Da jedoch die Breite des Containers ist bereits behoben und änderungen über die media queries würde ich lieber eine Lösung, wo ich nicht angeben einer festen Breite dot DD. Mit einem Anteil sowohl für die DT-und DD ist auch keine Lösung, denn das wäre Verschwendung Platz in der DT bei einem großen container.

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

Aktuellen 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; }
  • Verwenden Sie <table><tr><td></td></tr></table>
  • Gut, von der Semantik der Inhalte einer definition Liste wäre eher angebracht.
InformationsquelleAutor ThiefMaster | 2012-09-29
  1. 8

    Update: ich habe gelesen haben sollten, Ihre gesamte erste Frage.

    Nehmen Sie die float:left; auf die <dd>

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

    Eines der möglichen Probleme für Anfänger mit dieser Eigenschaft (wie ich schon oben angedeutet) ist, dass Sie davon ausgehen, dass die Einstellung whitespace: nowrap auf ein element wird verhindert, dass element vor dem fallen in die nächste Zeile, wenn Sie Teil einer Gruppe von gefloateten Boxen. Die white-space-Eigenschaft, allerdings nur für inline-Elemente innerhalb des Elements, seine angewendet, und wird nicht auf block-Elemente oder der Abstand von dem element selbst.

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

    Alten

    Als Sie eingestellt haben, breiten sich auf der dl und dt, hinzufügen dies die dd:

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

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

    Bewusst sein - das ist mit CSS3 - funktioniert nicht auf älteren Browsern - ist es für Sie zu beurteilen, ob das ein problem ist oder nicht - die meisten der Zeit, die ich nicht Verstand älteren Browsern immer einen etwas schlechteren pick von Stilen.

    • Danke, aber in diesem Fall müssen Sie angeben, eine Feste Breite der dd die ich explizit angegeben, nicht als eine Lösung, die ich Suche.
    • Ich habe meine Antwort aktualisiert
    • Vielen, vielen Dank! Auch ich hatte ein problem, wo die dt-und dd-Elemente wurden sowohl schwimmend als auch Links, aber für einige Grund Sie waren überfüllt das div dabei. Dieses fixiert es. Danke!
    InformationsquelleAutor Harry
  2. 1

    Brauchen Sie nicht die Einstellung der Breite sowohl auf die DT und DD.

    Geben nur die DT eine Breite und float left.
    Einstellung der DD overflow-Eigenschaft ausgeblendet, so laß Einbau in alle verbleibenden verfügbaren Speicherplatz.

    Dann white-space: nowrap; und text-overflow: ellipsis; machen Sie Lust auf hinzufügen die Schaltfläche mit den Auslassungszeichen, wenn der text zu lang ist.

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

    InformationsquelleAutor G.G.
Schreibe einen Kommentar