次のようなメニューバーの背景画像があります
各ボックスに4 つの定数テキストが表示されます。一番右のボックスは空の場所です。この画像は、静的な 4 つの垂直バーすべてで作成されています。
ここでの問題は、これら 4 つのテキストが非常に動的であり、さまざまな状況で長さが可変であることです。長さが可変であるため、テキストがボックス内に収まらない場合、これらの垂直バーと重なります。スタイリングまたは別の方法を使用してこのシナリオに対処するための最良のオプションは何ですか?
前もって感謝します。
1 に答える
3
ケース1：境界線を使用する
border-right画像に頼る代わりに、リンクを与えることができます。
.nav li a {border-right: 2px solid #000;}
ケース2：省略記号を使用する
あなたはtext-ellipsisそれらのリンクにを与えて、それらが線の中に収まるようにすることができます：
.nav li a {max-width: 150px; text-ellipsis: ellipsis; overflow: hidden; display: inline-block;} /* Get this thing right */
于 2012-09-18T02:30:47.280 に答える