对于下拉菜单,如果我固定菜单标题的大小并使用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>
有没有办法(hack)让我在这里插入符号?
谢谢
在文本前添加插入符号,并右浮动。
<b class="caret pull-right">This is my test heading
更新小提琴
这是一个将文本包装在自己的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>