6

nav-list一部のリスト要素に右揃えのラベルがあるブートストラップで構成される固定幅のサイドバーがあります。

例えば：

<li>
  <a href="#">abc_test_randomrandom</a>
  <span class="pull-right label">0000</span>
</li>

ただし、リンクが長い場合、これは機能しません。展開して行全体を埋め、ラベルを次の行にプッシュします。

この動作を示すために、jsFiddle デモを作成しました。編集：そして今も要点。

必要に応じて、長い文字列が次の行に折り返されますabc_test_randomrandom。0000これは可能ですか？

4

3 に答える 3

2

Praveenのソリューションは実際にはより良い実装だと思いますが、最初に要求された動作を取得しdisplay: inline-block、word-wrap: break-word設定widthすることで修正されます。

li a {width: 70%; display: inline-block; word-wrap: break-word;}

ワードラップ

于 2013-01-31T19:42:51.977 に答える
2

Bootstrap では、プルライトは基本的に CSS float の単なるラッパーです。マークアップの abc_test_randomrandom の前に 0000 スパンを配置する必要があり、必要に応じてアンカーを 2 行に折り返す必要があるため、浮動要素は浮動要素の前に配置されます。アンカーの右マージンを浮動要素の幅に設定する必要がある場合があります。今すぐ jsFiddle をロードできません。それ以外の場合は、より良い例を挙げてください。確認してみます。

編集: jsFiddle を読み込むことができました。

HTML のアンカーの前にスパンを移動し、この CSS を追加すると、これが機能します。テキストにスペースの代わりにアンダースコアが文字通り含まれる場合は、独自の回答で言及したワードラップ CSS が必要になります。

これの利点は、古いバージョンの IE で動作するために CSS ハック (つまり、表示用: インライン ブロック) を必要としないことです (それがプロジェクトの問題である場合)。

.nav-list a { display: block; margin-right: 30px; }

更新された jsFiddle のスクリーン ショット

于 2013-01-31T19:12:23.777 に答える
2

はい。固定幅を使用overflow: hidden;し、余分な部分は で指定しtext-ellipsisます。

li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;}
li span {width: 40%; display: inline-block;}

jsFiddle を開くことができません。そのため、正確な問題を確認できませんでした。

于 2013-01-31T19:09:36.893 に答える