Databases
StackOverflow2013
Postsdbo
POVery long words not wrapping in HTML/CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVery long words not wrapping in HTML/CSS
    text
    copied!<p>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.</p> <p>Here is an image below to help explain the scenario (not to scale) and also the code used:</p> <p><img src="https://i.stack.imgur.com/kCg94.png" alt="enter image description here"></p> <p><strong>Html:</strong></p> <pre><code>&lt;div class="comment-content"&gt; &lt;p&gt;cooooooooooooooooooooooooooooooooooooooool&lt;/p&gt; &lt;br /&gt; &lt;a class="delete-comment" data-delete-comment-id="28" href="/"&gt;Delete&lt;/a&gt; &lt;/div&gt; </code></pre> <p><strong>Css:</strong></p> <pre><code>.comment-content { width: 525px; margin: 13px 25px 0 0; } .comment-content p { width: 525px; } </code></pre> <p>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).</p> <p>If CSS/Html was not an option I guess the HTML 5 <code>&lt;wbr&gt;</code> 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 <code>&lt;wbr&gt;</code> or the font size decreased. Just after suggestions on the best solution really.</p> <p>Many Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload