如何在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> (可选换行符)标签。 它在浏览器中得到了很好的支持,并且基本上告诉浏览器它可以在需要的时候插入一个换行符。 还有相关的零宽度空格字符, &#8203; 具有相同的含义。

对于所提到的用例,在网页上显示用户注释,我会假设已经有一些输出格式来防止注入攻击等等。所以,将这些<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中做的事情:

  1. 拆分空格上的文本字段以获取所有单词
  2. 重复查找超过一定数量的单词
  3. 插入每个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("&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); 

将零宽度空间( &#8203; )添加到string,它将包装。

这是一个Javacript的例子:

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

我已经发布了一个解决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">&nbsp;</td> <td width="100">&nbsp;</td> </tr> </table> </body> </html> 

希望这可以帮助。