How to wrap long lines without spaces in HTML?

Question

If the user enters a long line without spaces or spaces, it is broken into formation, moving more widely than the current element. Something like:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

I tried just using wordwrap() in PHP, but the problem is that if there is a link or some other valid HTML, it breaks.

There are several options in CSS, but none of them work in all browsers. See Word Wrapping in IE.

How do you solve this problem?

Answer 1

I haven’t used it personally, but the Hyphenator looks promising.

Also see related (possibly recurring) questions:

• word wrap in css / js
• stack overflow

Answer 2

in CSS3:

 word-wrap:break-word 

Answer 3

I tried to solve the same problem, and I found a solution here:

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

Solution: Add the following CSS properties to the container

 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 uses them all so you can improve cross-browser compatibility.

Hope this helps

Answer 4

I like to use the overflow: auto property / CSS value. This will cause the parent to look the way you expected. If the text inside the parent is too wide, scrollbars appear inside the object itself. This will save the structure the way you want it to look, and provide the viewer with the ability to scroll to see more.

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

Answer 5

I am surprised that no one mentioned one of my favorite solutions to this problem - the <wbr> (optional line break). It is pretty well supported in browsers and essentially tells the browser that it can insert a line break if necessary. There also is a space character associated with a space, ​ with the same value.

In the mentioned use case, displaying user comments on a web page, I would suggest that output formatting already exists to prevent injection attacks, etc. Therefore, simply add these <wbr> tags for each N character in words too long or links.

This is especially useful when you need control over the output format, which CSS does not always allow you to do.

Answer 6

I would put a message in a div that would have a fixed-width overflow overflow for scrolling (or completely hide depending on the content).

So:

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

But it's just me.

EDIT: It is indicated as cLFlaVA ... it is better to use auto , then scroll . I agree with him.

Answer 7

There is no perfect HTML / CSS solution.

Solutions hide overflow (i.e., scrolling or just hidden) or expand to match. There is no magic.

Q: How can you put an object 100 cm wide into a space only 99 cm wide?

A: You cannot.

You can read break-word

EDIT

Please check out this solution. How to apply line break / continue style and code formatting with css

or

How to prevent long words from breaking my div?

Answer 8

I shy away from this problem without having the right to such a sidebar: P

Answer 9

Here is what I do in ASP.NET:

• Divide the text box into spaces to get all the words
• Iterate over words that search for words that are longer than a certain amount.
• Insert each x character (e.g. every 25 characters).

I looked at other CSS-based ways, but didn't find anything that worked in a cross browser.

Answer 10

based on the Jon suggestion the code I created:

 public static string WrapWords(string text, int maxLength) { string[] words = text.Split(' '); for (int i = 0; i < words.Length; i++) { if (words[i].Length > maxLength) //long word { words[i] = words[i].Insert(maxLength, " "); //still long ? words[i]=WrapWords(words[i], maxLength); } } text = string.Join(" ", words); return (text); } 

Answer 11

I did not want to add libraries to my pages just to break the word. Then I wrote a simple function that I provide below, hope it helps people.

(It breaks down into 15 characters and applies "& shy;" between them, but you can easily change it easily in code)

 //the function: BreakLargeWords = function (str) { BreakLargeWord = function (word) { var brokenWords = []; var wpatt = /\w{15}|\w/igm; while (wmatch = wpatt.exec(word)) { var brokenWord = wmatch[0]; brokenWords.push(brokenWord); if (brokenWord.length >= 15) brokenWords.push("&shy;"); } return brokenWords.join(""); } var match; var word = ""; var words = []; var patt = /\W/igm; var prevPos = 0; while (match = patt.exec(str)) { var pos = match.index; var len = pos - prevPos; word = str.substr(prevPos, len); if (word.length > 15) word = BreakLargeWord(word); words.push(word); words.push(match[0]); prevPos = pos + 1; } word = str.substr(prevPos); if (word.length > 15) word = BreakLargeWord(word); words.push(word); var text = words.join(""); return text; } //how to use var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"; var goodText = BreakLargeWords(bigText); 

Answer 12

Add the Zero Width space ( ​ ) to the line and it will complete.

Here is a javacript example:

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

Answer 13

I posted a solution that uses JavaScript and a simple regular expression to break a long word so that it can be wrapped without breaking your site layout.

Wrap long lines with CSS and JavaScript

Answer 14

I know this is a really old problem, and since I had the same problem, I was looking for a simple solution. As mentioned in the first post, I decided to use the wordwrap flash function.

See the following code example for information :-)

 <?php $v = "reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink"; $v2 = wordwrap($v, 12, "<br/>", true); ?> <html> <head> <title>test</title> </head> <body> <table width="300" border="1"> <tr height="30"> <td colspan="3" align="center" valign="top">test</td> </tr> <tr> <td width="100"><a href="<?php echo $v; ?>"><?php echo $v2; ?></a></td> <td width="100">&nbsp;</td> <td width="100">&nbsp;</td> </tr> </table> </body> </html> 

Hope this helps.