2

ドロップダウン メニューの場合、メニュー ヘッダーのサイズを修正して text-overflow: ellipsis; を使用すると、これもキャレット記号を取り除きます。ここで見ることができ、以下はコードです

http://jsfiddle.net/bZw8X/1/

<div class="navbar navbar-inner">
                    <ul class="nav">  
<li class="dropdown">
     <a  href="#" class="dropdown-toggle" data-toggle="dropdown">This is my test heading <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                 <li><a href="editProfile"> Edit Profile </a></li>
                                <li><a href="logout/"><i class="icon-block"></i> Logout</a></li>
                            </ul>
 </li> 


<li class="dropdown">
     <a  href="#" class="dropdown-toggle" data-toggle="dropdown">Second <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                 <li><a href="editProfile"> Edit Profile </a></li>
                                <li><a href="logout/"><i class="icon-block"></i> Logout</a></li>
                            </ul>
 </li>                         

       </ul> 
                </div>

ここでキャレットを取得する方法（ハック）はありますか？

ありがとうございました

4

2 に答える 2

3

テキストの前にキャレットを追加し、右に浮かせます。

<b class="caret pull-right">This is my test heading

更新されたフィドル

于 2013-05-24T19:00:19.883 に答える
3

これは、テキストを独自の div でラップするソリューションです。

http://jsfiddle.net/alforno/XSpZv/1/

.ael {
  width:100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden !important;
  float:left;
}

そしてhtmlはこれに変わりました：

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <div class="ael">This is my test heading</div> <b class="caret"></b>
    </a>

    <ul class="dropdown-menu">
        <li><a href="editProfile"> Edit Profile </a></li>
        <li><a href="logout/"><i class="icon-block"></i> Logout</a></li>
    </ul>
</li>
于 2013-05-24T19:02:12.893 に答える