Use zero-width space to force long strings to wrap inside a Bootstrap container

Posted on January 25th, 2017 at 11:00 PM

We defined a sidebar as col-md-4 in bootstrap and normal strings seem to break as expected if the container div uses style="word-break: break-word". However long strings with underscores and URL typical characters eg '&' do not respond to the break and overrun the container. Remy Blank pointed the way (here) using a zero-width space (​) to set the break point. It works well and the rendered string can still be cut and pasted as its original form

The container overrunning code appears like this

using the code shown below

<div onclick="$('#usageheadless').attr('style', 'display: none; word-break: break-word;');" class="col-md-4"> <div id="usageheadless" style="display: none; word-break: break-word;" class="well"> <h4>Help</h4> <br>Long URL: <br> <em>testpage.html?pval1=field1-longishfield2-evenlongerfield3-field4-field5&pval2=field6_field7_longishfield8_field9_field10&pval3=field11&pval4=true</em> </p> <ul> <li>list: <ul> <li><em>item1</em></li> <li><em>item2</em></li> <li><em>item3</em></li> </ul> </li> <li>parameter value: <em>full length long string eg field1_field2_field2_field3andfield4_field5andfield6_field7</em> </li> </ul> </div> </div>

The zero-width spaces are applied to the long strings below

testpage.html?pval1=field1-longishfield2&#8203;-evenlongerfield3-field4-field5&pval2=field6&#8203;_field7_longishfield8_field9_field10&pval3=field11&&#8203;pval4=true</em> <li>parameter value: <em>full length long string eg field1_field2_field2_field3andfield4&#8203;_field5andfield6_field7</em>

with the corresponding display