如何在HTML中无空格换行？
如果用户input一个没有任何空格或空格的长整型，则会比当前元素更宽。 就像是：
HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA …………………………………………. ………………………………………….. ……………………………………
我已经尝试在PHP中使用wordwrap() ，但问题是如果有链接或其他有效的HTML，它会中断。
在CSS中似乎有几个选项，但是它们都不适用于所有的浏览器。 请参阅IE中的单词换行。
你怎么解决这个问题？
我没有亲自使用它，但连字符看起来很有希望。
另请参阅相关（可能重复）问题：
- 在css / js中自动换行
- 谁解决了长篇大论 – 我的div问题？ （提示：不是stackoverflow）
在CSS3中：
word-wrap:break-word
我试图解决同样的问题，我发现解决scheme在这里：
http://perishablepress.com/press/2010/06/01/wrapping-content/
解决scheme：向容器添加以下CSS属性
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+ */ }
这个想法是全部使用它们，以便您获得更好的跨浏览器兼容性
希望这可以帮助
我喜欢使用overflow: auto CSS属性/值配对。 这将按照您期望的方式呈现父对象。 如果父项中的文本太宽，则滚动条会出现在对象本身内。 这将使结构保持您希望的样子，并使观众能够滚动查看更多内容。
编辑：关于overflow: auto比较overflow: scroll是与auto滚动条将只会出现溢出内容存在时。 通过scroll ，滚动条总是可见的。
我很惊讶没有人提到我最喜欢的解决scheme之一，即<wbr> （可选换行符）标签。 它在浏览器中得到了很好的支持，并且基本上告诉浏览器它可以在需要的时候插入一个换行符。 还有相关的零宽度空格字符， ​ 具有相同的含义。
对于所提到的用例，在网页上显示用户注释，我会假设已经有一些输出格式来防止注入攻击等等。所以，将这些<wbr>标签每N字符添加到太长的单词中很简单，或在链接。
当你需要控制输出的格式时，这是非常有用的，CSS并不总是让你这样做。
我会把这个post放在一个固定的宽度设置上滚动的div（或完全隐藏取决于内容）。
如此：
#post{ width: 500px; overflow: scroll; }
但那只是我。
编辑：正如cLFlaVA指出的那样…最好使用auto然后scroll 。 我同意他的看法
没有“完美”的HTML / CSS解决scheme。
解决scheme要么隐藏溢出（即滚动或只是隐藏）或扩大适合。 没有魔法。
问：如何将100厘米宽的物体放入只有99厘米宽的空间？
答：你不能。
你可以读破字
编辑
请检查这个解决scheme如何申请一个换行/继续样式和代码格式与CSS
要么
如何防止长词的打破我的div？
我通过不让我的右侧边栏固定这样来躲避问题：P
这是我在ASP.NET中做的事情：
- 拆分空格上的文本字段以获取所有单词
- 重复查找超过一定数量的单词
- 插入每个x字符（例如，每25个字符）。
我查看了其他基于CSS的方法，但没有发现任何跨浏览器的工作。
基于乔恩的build议我创build的代码：
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); }
我不想将图书馆添加到我的网页只是为了打破文字。 然后，我写了一个简单的函数，我在下面提供，希望它可以帮助人们。
（中间用15个字符打破，在“sh;”之间适用，但是在代码中可以很容易地改变）
//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("­"); } 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);
将零宽度空间（ ​ ）添加到string，它将包装。
这是一个Javacript的例子：
let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis'; // add ​ between every character to make it wrap longWordWithOutSpace.split('').join('​');
我已经发布了一个解决scheme，它使用JavaScript和一个简单的正则expression式来打破长单词，以便它可以被打包而不会破坏您的网站布局。
使用CSS和JavaScript包装长行
我知道这是一个非常古老的问题，因为我有同样的问题，我寻找一个简单的解决scheme。 正如在第一篇文章中提到的，我决定使用php函数wordwrap。
有关信息，请参阅以下代码示例;-)
<?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"> </td> <td width="100"> </td> </tr> </table> </body> </html>
希望这可以帮助。
