我试图在角度ui bootstrap的下拉列表中进行省略，并且插入符号在safari，chrome或firefox上不断分解。修复一个将打破另一个。
我用它制作了一个龙头，虽然它在镀铬中有效，但它会在徒步旅行中破裂:(
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<div class="btn-red">
<div class="btn-group" dropdown>
<div class="btn btn-primary dropdown-toggle">
<span class="title">
{{ data ? data : noTitle }}
</span>
<span ng-if="data" class="caret"></span></div>
<ul class="dropdown-menu" role="menu">
<li>test</li>
</ul>
</div>
</div>
</body>
</html>
var testApp = angular.module("testApp", []);
testApp.controller('testController', [ '$scope', function($scope) {
$scope.data = 'titie';
}]);
div.btn-red {
height: 40px;
line-height: 40px;
width: 100%;
padding: 0px;
border: 0px;
white-space: nowrap;
}
div.btn-red div.btn-group div.btn-primary {
width: 100%;
height: 40px;
padding: 0px;
line-height: 40px;
background-color: #e16a60;
border: 0px;
}
div.btn-red div.btn-group div.btn-primary span.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90%;
display: inline-block;
}
div.btn-red div.btn-group div.btn-primary span.caret {
height: 100%;
}
div.btn-red div.btn-group ul.dropdown-menu {
float: right;
width: 100%;
padding: 0px;
border: 0px;
}
div.btn-red div.btn-group ul.dropdown-menu li {
width: 100%;
color: #000000;
padding-left: 5px;
float: right;
border-bottom: 1px solid #cccccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.btn-red div.btn-group ul.dropdown-menu > li: hover {
background-color: #cccccc;
}
div.btn-red div.btn-group ul.dropdown-menu li.current {
color: #ffffff;
background-color: #e16a60;
}
div.btn-red div.btn-group ul.dropdown-menu li i {
font-size: 12px;
}
你可以在这里找到plunker： http://plnkr.co/edit/ulBVDFl2tWBUOp9bWiF0?p=preview
如果有人对如何解决这个问题有什么想法会很棒。 感谢。