Mam <dl> zawierający krótkie <dt> teksty i prawdopodobnie długie <dd> teksty. W układzie, w którym ich używam, chciałbym, aby pojawiały się obok siebie:

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

Jednak w przypadku, gdy zawartość DD jest zbyt długa, chcę ją tylko skrócić (overflow: hidden na DL). Prostym sposobem byłoby nadanie DD maksymalnej szerokości, aby uniknąć zbyt dużego rozmiaru, aby zmieścił się w jednej linii z DT o stałym rozmiarze. Ponieważ jednak szerokość kontenera jest już ustalona i zmienia się za pomocą zapytań o media, wolałbym rozwiązanie, w którym nie muszę określać stałej szerokości kropki w DD. Stosowanie wartości procentowej zarówno dla DT, jak i DD również nie jest rozwiązaniem, ponieważ spowodowałoby to marnowanie miejsca w DT w przypadku dużego kontenera.

Skrzypce pokazujące problem: http://jsfiddle.net/ThiefMaster/fXr9Q/4/

Aktualny 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; }
5
ThiefMaster 29 wrzesień 2012, 17:49

2 odpowiedzi

Najlepsza odpowiedź

Aktualizacja: Powinienem najpierw przeczytać całe Twoje pytanie.

Zdejmij float:left; na <dd>

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

Jednym z możliwych problemów dla początkujących używających tej właściwości (jak już wspomniałem powyżej) jest to, że zakładają, że ustawienie białych znaków: nowrap na elemencie zapobiegnie spadaniu tego elementu do następnej linii, jeśli jest on częścią grupy pływających pól. Jednak właściwość white-space będzie miała zastosowanie tylko do elementów śródliniowych wewnątrz elementu, do którego została zastosowana, i nie będzie miała wpływu na elementy blokowe ani odstępy samego elementu.

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


Stary

Ponieważ ustawiłeś szerokości na dl i dt, dodaj to do dd:

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

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

Pamiętaj - to jest CSS3 - nie będzie działać na starszych przeglądarkach - musisz ocenić, czy jest to problem, czy nie - przez większość czasu nie mam nic przeciwko starszym przeglądarkom, które otrzymują nieco gorszy wybór stylów.

8
endolith 5 listopad 2014, 06:42

Nie musisz ustawiać szerokości zarówno na DT, jak i DD.

Po prostu nadaj ID szerokość i płyń w lewo. Ustawienie właściwości przepełnienia DD na ukryte pozwoli na dopasowanie całej dostępnej pozostałej przestrzeni.

Następnie spacja: nowrap; i przepełnienie tekstu: wielokropek; sprawi, że dodanie wielokropka będzie fantazyjne, gdy tekst będzie zbyt długi.

Oto droga: http://jsfiddle.net/fLPej/

1
G.G. 29 wrzesień 2012, 18:15