5

<dl>短い<dt>テキストと、場合によっては長いテキストが含まれてい<dd>ます。それらを使用しているレイアウトでは、それらを並べて表示したいと思います。

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

overflow: hiddenただし、DDのコンテンツが長すぎる場合は、（ DL上で）切り捨ててください。簡単な方法の1つは、DDに最大幅を指定して、固定サイズのDTと1行に収まらないほど大きくならないようにすることです。ただし、コンテナの幅はすでに固定されており、メディアクエリを介して変更されるため、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; }
4

2 に答える 2

8

更新：最初に質問全体を読むべきでした。

float:left;を脱ぐ<dd>

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

このプロパティを使用する初心者にとって考えられる問題の 1 つは (上で既に触れたように)、要素に whitespace: 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-29T13:57:39.550 に答える
1

DT と DD の両方で幅を設定する必要はありません。

DT に幅を与え、左にフロートします。DD のオーバーフロー プロパティを非表示に設定すると、使用可能な残りのすべてのスペースに適合します。

次に、空白: nowrap; および text-overflow: 省略記号; テキストが長すぎるときはいつでも省略記号を追加するのが好きになります。

これが行く方法です：http://jsfiddle.net/fLPej/

于 2012-09-29T14:15:27.823 に答える