CODEWITHSUNDEEP
jqueryhtml
Alex
Alex

Reputation: 1042

splitting long single words onto multiple lines without breaking links or html tags

I have the following line on my page in the $(document).ready(function(){...} It is done in ASP.NET

$("#standard-styling").html($("#standard-styling").text().replace(/([^\s-]{5})(?=[^\s-])/g, '$1­'));

HTML:

<div id="standard-styling" class="description">
    <% Response.Write(Model.Description); %>
</div>

It works great for splitting long words onto multiple lines by adding a -<br> if the browser thinks it's necessary, and ignoring it if not (http://www.quirksmode.org/oddsandends/wbr.html). However, if the description contains a link, then the link will not show up as a hyperlink. Also, if there are line breaks, <br /> or other tags, they are likely to be broken and ignored as well. lastly, it is causing problems with encoded characters like &lt;br /&gt;. It is then seen as <br /> and does insert a line break there.

Is there a better way to go about this?

Upvotes: 2

Views: 5004

Answers (1)

Victor
Victor

Reputation: 5769

Use css:

#standard-styling {
   word-wrap: break-word;
}

Or using jQuery:

$("#standard-styling").css('word-wrap', 'break-word');


UPD:

jQuery Example: http://jsbin.com/ojoges/1/

CSS Example: http://jsbin.com/ojoges/

Upvotes: 1

Related Questions