Internet Explorer appears (versions 6 through 11) to be confusing the .foo<space> pattern as one that shouldn't allow a break. To confirm this I created a simple script that replicated the pattern a thousand times:
for ( var i = 0; i < 1000; i++ ) {
document.body.appendChild(
// Note the trailing space after .wut
document.createTextNode( ".wut " )
);
}
Sure enough, Internet Explorer generates lateral overflow rather than wrapping the text at the at the most appropriate instance of white-space. I work on the Internet Explorer team and will open up an issue for our team to investigate further whether this is intentional or not.
You could follow each extension with a comma (.foo, .bar):
<p class="alert alert-info" role="alert" style="margin-top: 0.25em;">
<i class="glyphicon glyphicon-info-sign"></i>
You can send us files that end in: .jpg, .gif, .png, .bmp, .psd, .pdf, .doc,
.docx, .ppt, .pptx, .xls, .xlsx, .vsd, .txt, .tiff.
</p>
This will successfully wrap as expected. This does add to the verbosity of the text however.
Alternatively, you can explicitly instruct IE to break more often:
.alert { word-break: break-all }
This appears to resolve the issue you're experiencing, however you may find that it breaks too soon. The only other alternative would be to modify the contents such that you explicitly state that a break may occur after each extension:
// Run after document has been populated with all .alert-info elements
$( ".alert-info" ).contents().each(function ( i, o ) {
if ( o.nodeType === 3 ) {
$( o ).replaceWith(function () {
return o.nodeValue.replace( /\s+/g, " ­" );
});
}
});
Granted, this isn't ideal, but unfortunately it's all we can do for the time being.
