Tôi có một số <dl> chứa văn bản ngắn <dt> và có thể dài <dd> văn bản. Trong cách bố trí nơi tôi đang sử dụng chúng tôi muốn họ xuất hiện side-by-side:Định nghĩa danh sách song song mà không cần gói các dòng quá dài
/==============\
|DT DD........|
|DT DD........|
|DT DD........|
\==============/
Tuy nhiên, trong trường hợp nội dung của DD quá dài tôi chỉ muốn nó được rút ngắn (overflow: hidden trên DL). Một cách dễ dàng sẽ cho DD một chiều rộng tối đa để tránh nó quá lớn để vừa với một đường thẳng với DT có kích thước cố định. Tuy nhiên, kể từ khi chiều rộng của container đã được cố định và thay đổi thông qua các truy vấn phương tiện truyền thông tôi muốn một giải pháp mà tôi không phải chỉ định một chiều rộng cố định dot DD. Sử dụng tỷ lệ phần trăm cho cả DT và DD cũng không phải là một giải pháp vì điều đó sẽ lãng phí không gian trong DT trong trường hợp thùng chứa lớn.
Fiddle cho thấy vấn đề: http://jsfiddle.net/ThiefMaster/fXr9Q/4/
CSS hiện tại:
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; }
Sử dụng
Vâng, từ ngữ nghĩa của nội dung một danh sách định nghĩa sẽ thích hợp hơn. – ThiefMaster