How to wrap long lines without spaces in HTML?

Question

If a user types in a long line without any spaces or white space, it will break formating by going wider than the current element. Something like:

HA

Answer 1

I would put the post in a div that would have a fixed width setting overflow to scroll (or to hide completely depending on the content).

so like:

#post{
    width: 500px;
    overflow: scroll;
}

But that's just me.

EDIT: As cLFlaVA points out... it is better to use auto then scroll. I do agree with him.

Answer 2

I was trying to solve the same problem and I found de solution here:

http://perishablepress.com/press/2010/06/01/wrapping-content/

Solution: adding to the container the following CSS properties

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

The idea is using them all so you get better cross-browser compatibility

Hope this helps

Answer 3

I like to use the overflow: auto CSS property/value pairing. This will render the parent object the way you'd expect it to appear. If the text within the parent is too wide, scrollbars appear within the object itself. This will keep the structure the way you want it to look and provide the viewer with the ability to scroll over to see more.

Edit: the nice thing about overflow: auto compared to overflow: scroll is that with auto, the scrollbars will only appear when overflowing content exists. With scroll, the scrollbars are always visible.

Answer 4

I dodge the problem by not having my right sidebar fixed like that :P

Answer 5

in CSS3:

word-wrap:break-word

Answer 6

Add the Zero width space (​) to the string and it will wrap.

Here is a Javacript example:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add ​ between every character to make it wrap
longWordWithOutSpace.split('').join('​');