Boostrap dropdown-menu header width и caret

Question

Для выпадающего меню, если я исправляю размер заголовка меню и использую переполнение текста: эллипсис; это также снимает символ каретки. Вы можете увидеть его здесь и ниже код

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> 

Есть ли способ (хак) я могу получить здесь знак вставки?

Спасибо

Answer 1

Добавить каретку перед текстом, и плавать правильно.

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

Updated Fiddle

Answer 2

Вот решение, которое оборачивает текст в его собственных делах.

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>