Take a look at this:
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>(Well, it seems that the Snippets feature causes this to happen before the button is clicked. If you want to check it out, you can do so on JSFiddle here)
By clicking the button, the icons should cycle through, but in Firefox only†, the "second word" is also removed. It appears that the word wrapping is changing, causing the second word to drop down to an [invisible] second line. Toggling the word-break: break-all property off then back on using the debugger restores the initial state.
What could be the cause of this issue? Is it related to incorrect HTML/styles or a bug in Firefox?
And how can I address this with minimal modifications?
† This issue occurs in Firefox versions 50.1.0 and 51.0.1; it works fine in Chrome 55 and IE 11 (all on Windows 7).