如何在HTML中不带空格的长行换行？

如果用户键入的长行中没有空格或空白，则会超出当前元素的宽度，从而破坏格式。就像是：

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈... ................................................... ...................................................

我已经尝试过仅wordwrap()在PHP中使用，但是问题在于，如果有链接或其他有效的HTML，它就会中断。

CSS中似乎有一些选项，但是它们都不在所有浏览器中都可用。请参阅IE中的自动换行。

你怎么解决这个问题？

我没有亲自使用过，但是Hyphenator看起来很有前途。

另请参阅相关（可能重复）的问题：

• 在css / js中自动换行
• 谁解决了我的div-break-breaks-my-div问题？（提示：不是stackoverflow）

在CSS3中：

word-wrap:break-word

我试图解决同样的问题，但在这里找到了解决方案：

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

解决方案：将以下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: autoCSS属性/值配对。这将以您期望的方式呈现父对象。如果父级中的文本太宽，则滚动条会出现在对象本身中。这将使结构保持您希望的外观，并使查看者可以滚动查看更多内容。

编辑：与overflow: auto相比，好处overflow: scroll是，auto只有在存在溢出内容时，滚动条才会出现。使用scroll，滚动条始终可见。

令我惊讶的是，没有人提到我最喜欢的解决方案之一，<wbr>（可选的换行符）标记。它在浏览器中得到了很好的支持，实际上告诉浏览器可以在必要时插入换行符。还有相关的零宽度空格字符，​含义相同。

对于提到的用例，在网页上显示用户评论，我假设已经有一些输出格式来防止注入攻击，等等。因此，可以将这些<wbr>标签添加到每个N单词中太长的单词或链接中，这很简单。 。

当您需要控制输出的格式时，这特别有用，而CSS并不总是允许您这样做。

我会将帖子放在div中，该div具有固定的宽度设置来滚动（或根据内容完全隐藏）。

像这样：

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

但这就是我。

编辑：作为cLFlaVA指出...这是更好地使用auto然后scroll。我同意他的看法。

没有“完美的” HTML / CSS解决方案。

解决方案要么隐藏溢出（即滚动或仅隐藏），要么扩展以适合。没有魔术。

问：如何将100厘米宽的物体放在仅99厘米宽的空间中？

答：不能。

你可以读断词

编辑

请查看此解决方案 如何使用CSS应用换行/继续样式和代码格式

要么

如何防止长词破坏我的div？

我没有像这样固定我的右侧边栏来回避问题：P

这是我在ASP.NET中所做的事情：

1. 在空格上分割文本字段以获取所有单词
2. 迭代单词以查找长度超过一定数量的单词
3. 插入每x个字符（例如，每25个字符）。

我查看了其他基于CSS的方法，但是没有发现任何可以跨浏览器使用的方法。

根据乔恩的建议，我创建了以下代码：

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个字符，并且在两者之间加上了“＆shy;”，但是您可以在代码中轻松地对其进行更改）

//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);

将零宽度空格（​）添加到字符串中，它将自动换行。

这是一个Javacript示例：

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

我发布了一个使用JavaScript和简单正则表达式的解决方案，以打破长单词，以便可以包装它而不会破坏您的网站布局。

使用CSS和JavaScript换行

我知道这是一个非常老的问题，因为我遇到了同样的问题，所以我寻找了一个简单的解决方案。如第一篇文章中所述，我决定使用php函数自动换行。

有关信息，请参见以下代码示例；-)

<?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>

希望这可以帮助。