检查一下:
var iconIndex = 0;
var icons = ['check', 'chain-broken', 'flag-o', 'ban', 'bell-o'];
$('button:eq(0)').click(function() {
iconIndex = (iconIndex + 1) % icons.length;
$('#dev-0 .status-icon').attr('class', 'status-icon fa fa-fw fa-' + icons[iconIndex]);
});
ul {
width: 200px;
border: 1px dotted #ccc;
}
.device-list-item {
max-height: 31px;
overflow: hidden;
word-break: break-all;
}
a {
position: relative;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav">
<li id="dev-0">
<a href="#" class="device-list-item">
<span>
<i class="status-icon fa fa-fw fa-bell-o"></i>
<span>Firstwordhere Secondwordhere</span>
</span>
</a>
</li>
</ul>
<button>Click me</button>
(嗯,显然,在您单击按钮之前,有关代码段功能的某些内容实际上会触发此操作。您可以 see it on JSFiddle though )
点击按钮应该只会循环显示图标,但仅在 Firefox 中† 它还会删除“第二个词”。事实证明,换行正在发生变化,将第二个单词放到 [不可见的] 第二行。如果我使用调试器将 word-break: break-all
属性关闭然后重新打开,则会回收初始状态。
这是什么原因造成的?错误的 HTML/样式,还是 Firefox 错误?
我怎样才能通过最少的更改解决这个问题?
† 在 Firefox 50.1.0、51.0.1 中损坏;在 Chrome 55 和 IE 11(所有 Windows 7)中工作。
最佳答案
我相信这是 Firefox bug 1319424 ,据说已在 v53 中修复(4 月到期)。
确实,它在每晚 53.0a2 (2017-02-09) 上按预期工作。
关于javascript - 修改子类时,Firefox 似乎会放弃自动换行样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41241391/