How do I avoid 1 long word from messing up my comment section?

Question

So I have a comment social thing I created. Basically what happens is that if someone types a really long word, I mean like no spaces whatsoever, the new div created won't be able to contain it, so it runs off the page.

Here is a live example:

.content {
  background-color: white;
  margin: 0 auto;
  width: 500px;
  border: 1px solid purple;
  padding: 10px;
}

<div class="content" style="color:#B404AE; font-weight:bold;">'.$name. '</div>
<div class="content">'VerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongword'</div>
<br
/>

JSbin version: http://output.jsbin.com/tilomacopo

How do I avoid this problem. Is there a way to split this word up, if there is no spaces in it? I'm not sure what I should google, or even how to word this, which is the main problem. Thank you for your replies.

Try adding _word-wrap: break-word;_ in your _.content_ CSS rule — sokin, Sep 18 '15 at 05:06
possible duplicate of [How to prevent long words from breaking my div?](http://stackoverflow.com/questions/320184/how-to-prevent-long-words-from-breaking-my-div) — Alexis Tyler, Sep 18 '15 at 05:15

Maximillian Laumeister · Accepted Answer · 2015-09-18T05:31:58.247

The problem with changing the default word wrapping behavior is that if the user is typing normally, their line may break in the middle of a word, which feels very unnatural.

I would consider instead putting a scrollbar on the div if the text gets too long. The way to do that is by giving it the overflow: auto CSS property.

Live Demo:

.content {
  background-color: white;
  margin: 0 auto;
  width: 500px;
  border: 1px solid purple;
  padding: 10px;
  overflow: auto;
}

<div class="content" style="color:#B404AE; font-weight:bold;">'.$name. '</div>
<div class="content">'VerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongwordVerylongword'</div>
<br/>
<div class="content" style="color:#B404AE; font-weight:bold;">'.$name. '</div>
<div class="content">'Shorter, normal words break and wrap normally when they reach the end of the div that they're in.'</div>
<br/>

Edit: I just learned that if you use word-wrap: break-word, then only words that are too long will be broken up, so that might be a better solution. A full list of word-wrap properties is available on MDN.

Adam · Answer 2 · 2015-09-18T05:26:59.540

1

If you add the style word-break: break-all to the container that contains that text string – it will force the string to wrap when it exceeds the width of that container.

Update: word-wrap: break-word is a much better rule to use.

Updated jsbin

edited Sep 18 '15 at 05:26

answered Sep 18 '15 at 05:06

Adam

146
1
3
11

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

You can write a function that adds a space or dash after certain characters if the comment is too long. There are some other possibilities as discussed here: How to prevent long words from breaking my div?

edited May 23 '17 at 12:14

Community

1
1

answered Sep 18 '15 at 05:06

zedfoxus

35,121
5
64
63

How do I avoid 1 long word from messing up my comment section?

3 Answers3