Very long words not wrapping in HTML/CSS

Question

I have an issue where if a user was to enter a long comment/word such as 'cooooooooooooooooooooooooooooooooooooooool' this would break the formatting on the page.

Here is an image below to help explain the scenario (not to scale) and also the code used:

Html:

<div class="comment-content">
    <p>cooooooooooooooooooooooooooooooooooooooool</p>
    <br />
    <a class="delete-comment" data-delete-comment-id="28" href="/">Delete</a>
</div>

Css:

.comment-content
{
    width: 525px; 
    margin: 13px 25px 0 0;
}
.comment-content p
{
    width: 525px;
}

I am wondering if there is a quick fix for this without changing too much markup and CSS as this is area of code we would not want to introduce bugs by changing the application code (written in ASP.NET/MVC 3).

If CSS/Html was not an option I guess the HTML 5 <wbr> Tag could be used to seperate the word after 'x' amount of characters - the only issue with this is that the website is multi lingual in 9 languages. Japanese and Chinese for instance the text characters are significantly larger then English text characters which would need multiple conditional code for these to get the character count before adding the <wbr> or the font size decreased. Just after suggestions on the best solution really.

Many Thanks

Answer 1

Try this

.comment-content p {
    word-wrap: break-word;
}

Live Demo

More Information