修改孩子的班级时，Firefox 似乎放弃了自动换行样式

Question

看看这个：

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>

（嗯，显然，在你点击按钮之前，关于 Snippets 功能的某些东西实际上已经触发了这个。你可以see it on JSFiddle though）

点击按钮应该只是循环浏览图标，但仅在 Firefox 中^†它也会删除“第二个单词”。事实证明，自动换行正在发生变化，将第二个单词放到 [invisible] 第二行。如果我关闭 word-break: break-all 属性然后再打开，使用调试器，初始状态被回收。

这是什么原因造成的？糟糕的 HTML/样式，还是 Firefox 错误？

我怎样才能通过最少的更改来解决它？

_{^† 在 Firefox 50.1.0、51.0.1 中损坏；在 Chrome 55 和 IE 11（所有 Windows 7）中工作。}

Answer 1

我相信这是Firefox bug 1319424，据说它已在 v53（4 月到期）中修复。

确实，它在每晚 53.0a2 (2017-02-09) 上按预期工作。