lichao Shen February 2016

parenthesis breaks line in IE

have a similar question here Non-breaking parentheses? but the white-space: nowrap; makes the whole thing in one line which is not ideal. e.g. a group of elephant(s) ... In ie, (s) could be in a separate line. Is there any way to disable this in IE?

Answers


Sampson February 2016

It's unfortunate that Internet Explorer and Microsoft Edge behave differently than other browsers in this regard. I am an engineer on the Microsoft Edge team, and will file an interop bug so as to investigate the matter further with the team.

For the time being, you could wrap each of these instances in a span element, preventing white-space wrapping on the contents therein. I understand this content is coming from user-input; as such, you could identify the portions of the user-input that need to be wrapped, and replace them with an element. As a simple example, here is one approach:

var tweets = [].slice.call( document.querySelectorAll( ".tweet" ) );

tweets.forEach(function ( tweet ) {
    tweet.innerHTML = tweet.innerHTML.replace(/\w+\(\w+\)/g, function ( match ) {
        return "<span class='nobreak'>" + match + "</span>";
    })
});
.nobreak {
    color: white;
    background: green;
    white-space: nowrap;
}

.tweet {
    border: 1px solid #000;
    animation: rescale 20s linear infinite alternate;
}

@keyframes rescale {
    from { width: 100% }
      to { width: 25%  }
}
<p class="tweet">@ericlaw I've been thinking about this feature, and the security risk(s). I like the fact they're experimenting, but wonder at what cost.</p>

Post Status

Asked in February 2016
Viewed 1,861 times
Voted 11
Answered 1 times

Search




Leave an answer