blocks|key|358060|text|我通过不像这样修复我的右边栏来避免这个问题:P|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358061|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|355462|text|我会把帖子放在一个有固定宽度的div中，设置overflow来滚动(或者完全隐藏，取决于内容)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|355463|就像这样：|355464|#post{
++++width:+500px;
++++overflow:+scroll;
}|code-block|syntax|javascript|355465|但那只是我的想法。|355466|编辑:正如cLFlaVA指出的那样...使用auto比使用scroll更好。我确实同意他的观点。|offset|length|style|BOLD|CODE|355467|entityMap^0|0|0|0|0|5|7|M|4|T|6|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|X|8|@$M|Y|N|Z|O|P]|$M|10|N|11|O|Q]|$M|12|N|13|O|Q]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|S|$]]

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:

<pre><code>#post{
 width: 500px;
 overflow: scroll;
}
</code></pre>

But that's just me.

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

blocks|key|3138998|text|下面是我在ASP.NET中做的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3138999|3139000|以空格拆分文本字段以获得所有单词|ordered-list-item|3139001|迭代单词查找超过一定长度的单词|3139002|每x个字符插入一次(例如每25个字符)|3139003|3139004|我查看了其他基于CSS的方法，但没有发现任何跨浏览器工作的方法。|3139005|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|P|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|S|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Here's what I do in ASP.NET:

<ol>
<li>Split the text field on spaces to get all the words</li>
<li>Iterate the words looking for words that are longer than a certain amount</li>
<li>Insert every x characters (e.g. every 25 characters.)</li>
</ol>

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

blocks|key|354733|text|我喜欢使用overflow:+auto+CSS属性/值对。这将以您期望的方式呈现父对象。如果父对象中的文本太宽，则会在对象本身内显示滚动条。这将使结构保持您想要的外观，并为查看者提供滚动查看更多内容的能力。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|354734|编辑:与overflow:+scroll相比，overflow:+auto的优点在于，使用auto时，只有在存在溢出内容时才会出现滚动条。使用scroll时，滚动条始终可见。|354735|entityMap^0|5|E|0|4|G|N|E|19|4|1Z|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$]]

I like to use the <code>overflow: auto</code> 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 <code>overflow: auto</code> compared to <code>overflow: scroll</code> is that with <code>auto</code>, the scrollbars will only appear when overflowing content exists. With <code>scroll</code>, the scrollbars are always visible.

blocks|key|355517|text|没有“完美”的HTML/CSS解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|355518|解决方案要么隐藏溢出(即滚动或只是隐藏)，要么扩展以适应。根本就没有魔法。|355519|问:你怎么能把一个100厘米宽的物体放进一个只有99厘米宽的空间？|355520|答:你不能。|355521|你可以阅读break-word|offset|length|355522|编辑|style|BOLD|355523|请查看此解决方案How+to+apply+a+line+wrap/continuation+style+and+code+formatting+with+css|355524|或|355525|How+to+prevent+long+words+from+breaking+my+div?|355526|entityMap|0|LINK|mutability|MUTABLE|url|http://css-discuss.incutio.com/?page=WordWrapLongText|1|https://stackoverflow.com/questions/330229/how-to-apply-a-line-wrapcontinuation-style-and-code-formatting-with-css|2|https://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow^0|0|0|0|0|5|A|0|0|0|2|0|8|20|1|0|0|0|1B|2|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@$J|1C|K|1D|1|1E]]|A|$]]|$1|L|3|M|5|6|7|1F|8|@$J|1G|K|1H|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1I|8|@]|9|@$J|1J|K|1K|1|1L]]|A|$]]|$1|R|3|S|5|6|7|1M|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1N|8|@]|9|@$J|1O|K|1P|1|1Q]]|A|$]]|$1|V|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]|15|$5|Y|Z|10|A|$11|16]]]]

There is no "perfect" HTML/CSS solution.

The solutions either hide the overflow (ie scrolling or just hidden) or expand to fit. There is no magic. 

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

A: You can't.

You can read <a href="http://css-discuss.incutio.com/?page=WordWrapLongText" rel="nofollow noreferrer">break-word</a> 

EDIT

Please check out this solution 
<a href="https://stackoverflow.com/questions/330229/how-to-apply-a-line-wrapcontinuation-style-and-code-formatting-with-css">How to apply a line wrap/continuation style and code formatting with css</a>

or

<a href="https://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow">How to prevent long words from breaking my div?</a>

blocks|key|3139091|text|我没有亲自使用过它，但是Hyphenator看起来很有前途。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3139092|另请参阅相关(可能重复)问题：|3139093|3139094|word+wrap+in+css+/+js|unordered-list-item|3139095|Who+has+solved+the+long-word-breaks-my-div+problem?+(hint:+not+stackoverflow)|3139096|3139097|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/hyphenator/|1|https://stackoverflow.com/questions/322929/word-wrap-in-css-js|2|https://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow^0|C|A|0|0|0|0|0|L|1|0|0|25|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|13|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|J|3|K|5|I|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|L|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]]]

I haven't personally used it, but <a href="http://code.google.com/p/hyphenator/" rel="nofollow noreferrer">Hyphenator</a> looks promising.

Also see related (possibly duplicate) questions:

<ul>
<li><a href="https://stackoverflow.com/questions/322929/word-wrap-in-css-js">word wrap in css / js</a></li>
<li><a href="https://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow">Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)</a></li>
</ul>

blocks|key|358173|text|根据Jon的建议，我创建的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358174|public+static+string+WrapWords(string+text,+int+maxLength)
++++{
++++++++string[]+words+=+text.Split('+');
++++++++for+(int+i+=+0;+i+<+words.Length;+i%2B%2B)
++++++++{
++++++++++++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);
++++}|code-block|syntax|javascript|358175|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

based on Jon's suggestion the code that I created:

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

blocks|key|354783|text|我已经发布了一个解决方案，它使用JavaScript和一个简单的正则表达式来打破长单词，以便它可以被包装，而不会破坏您的网站布局。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354784|Wrap+long+lines+using+CSS+and+JavaScript|offset|length|354785|entityMap|0|LINK|mutability|MUTABLE|url|http://www.hemanshubhojak.com/Home/Post?postId=8^0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

I have posted a solution which uses JavaScript and a simple Regular Expression to break long word so that it can be wrapped without breaking your website layout.

<a href="http://www.hemanshubhojak.com/Home/Post?postId=8" rel="nofollow noreferrer">Wrap long lines using CSS and JavaScript</a>

blocks|key|355583|text|在CSS3中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|355584|word-wrap:break-word|code-block|syntax|javascript|355585|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

in CSS3: 

<pre><code>word-wrap:break-word
</code></pre>

blocks|key|353586|text|我知道这是一个非常老的问题，因为我也有同样的问题，所以我寻找了一个简单的解决方案。正如在第一篇文章中提到的，我决定使用php-function+wordwrap。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|353587|参考以下代码示例;-)|353588|<?php
++++$v+=+"reallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglinkreallyreallyreallylonglink";
++++$v2+=+wordwrap($v,+12,+" ",+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>|code-block|syntax|javascript|353589|希望这能有所帮助。|353590|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I know that this is a really old problem and since I had the same problem I searched for a easy solution. 
As mentioned in the first post I decided to use the php-function wordwrap.

See the following code example for information ;-)

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

Hope this helps.

blocks|key|354878|text|我试图解决同样的问题，我在这里找到了解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354879|http://perishablepress.com/press/2010/06/01/wrapping-content/|offset|length|354880|解决方案:向容器添加以下CSS属性|354881|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%2B+*/
}|code-block|syntax|javascript|354882|我的想法是把它们都用上，这样你就能获得更好的跨浏览器兼容性|354883|希望这能有所帮助|354884|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1P|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

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

<a href="http://perishablepress.com/press/2010/06/01/wrapping-content/">http://perishablepress.com/press/2010/06/01/wrapping-content/</a>

Solution: adding to the container the following CSS properties

<pre><code>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+ */
}
</code></pre>

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

Hope this helps

blocks|key|3352004|text|令我惊讶的是，没有人提到我最喜欢的这个问题的解决方案之一--++(可选换行符)标记。它相当于well-supported+in+browsers，本质上是告诉浏览器，如果需要，它可以插入一个换行符。还有相关的零宽度空格字符&#8203;，含义相同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3352005|对于上面提到的用例，在网页上显示用户评论，我会假设已经有了一些输出格式来防止注入攻击，等等。所以很容易在过长的单词或链接中添加每个N字符的标记。|3352006|当您需要控制输出格式时，这特别有用，而CSS并不总是允许您这样做。|3352007|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/oddsandends/wbr.html^0|V|5|38|7|1F|Q|0|0|1T|1|1X|5|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

I'm surprised that nobody has mentioned one of my favorite solutions to this problem, the <code>&lt;wbr&gt;</code> (optional line-break) tag. It's fairly <a href="http://www.quirksmode.org/oddsandends/wbr.html">well-supported in browsers</a> and essentially tells the browser that it can insert a line-break if it's necessary. There's also the related zero-width space character, <code>&amp;#8203;</code> with the same meaning.

For the use case mentioned, displaying user comments on a web page, I would assume that there is already some output formatting to prevent injection attacks, etc. So it's simple to add these <code>&lt;wbr&gt;</code> tags every <code>N</code> characters in words that are too long, or in links.

This is especially useful when you need control over the format of the output, which CSS doesn't always let you do.

blocks|key|3352023|text|我不想仅仅为了断字而将库添加到我的页面中。然后我写了一个简单的函数，我在下面提供，希望它能帮助人们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3352024|(它由15个字符中断，并在其间应用"&+shy;“，但您可以在代码中轻松更改它)|3352025|//the+function:
BreakLargeWords+=+function+(str)
{
++++BreakLargeWord+=+function+(word)
++++{
++++++++var+brokenWords+=+[];
++++++++var+wpatt+=+/\w{15}%7C\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+%2B+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+here!+aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var+goodText+=+BreakLargeWords(bigText);|code-block|syntax|javascript|3352026|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I didn't want to add libraries to my pages just for word breaking.
Then I wrote a simple function which I provide below, hope it helps people.

(It is breaking by 15 characters, and applying "&amp; shy;" between, but you can change it easily in the code)

<pre><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 &gt;= 15) brokenWords.push("&amp;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 &gt; 15) word = BreakLargeWord(word);

 words.push(word);
 words.push(match[0]);
 prevPos = pos + 1;
 }
 word = str.substr(prevPos);
 if (word.length &gt; 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 &lt;b&gt;here&lt;/b&gt;! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);
</code></pre>

blocks|key|355674|text|将零宽度空格(&#8203;)添加到字符串中，它将自动换行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|355675|下面是一个Javacript示例：|355676|let+longWordWithOutSpace+=+'pneumonoultramicroscopicsilicovolcanoconiosis';
//+add+&#8203;+between+every+character+to+make+it+wrap
longWordWithOutSpace.split('').join('&#8203;');|code-block|syntax|javascript|355677|entityMap^0|7|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Add the Zero width space (<code>&amp;#8203;</code>) to the string and it will wrap.

Here is a Javacript example:

<pre><code>let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add &amp;#8203; between every character to make it wrap
longWordWithOutSpace.split('').join('&amp;#8203;');
</code></pre>

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:

<blockquote>
 HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA.............................................................................................................................................
</blockquote>

I've tried just using <code>wordwrap()</code> in PHP, but the problem with that is if there is a link or some other valid HTML, it breaks.

There seems to be a few options in CSS, but none of them work in all browsers. See word-wrap in IE.

How do you solve this problem?

How to wrap long lines without spaces in HTML?

PHP语言

容器

如果用户在没有任何空格或空格的长行中键入内容，将会超出当前元素的宽度，从而中断格式化。类似于： HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA...........................................................................

问如何在HTML中包装没有空格的长行？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML中包装没有空格的长行？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML中包装没有空格的长行？
EN