如何在 HTML 中换行没有空格的长行？答案

【问题标题】：How to wrap long lines without spaces in HTML?如何在 HTML 中换行没有空格的长行？
【发布时间】：2010-09-26 16:17:55
【问题描述】：

如果用户在没有任何空格或空白的情况下输入长行，它将通过比当前元素更宽来破坏格式。比如：

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

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

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

你如何解决这个问题？

【问题讨论】：

这个问题刚刚让 Chrome 崩溃了——以及所有的标签。有史以来第一次。为什么第一行不换行？！
@TheSoftwareJedi - 考虑到 chrome 应该独立处理选项卡，包括崩溃，您可能会考虑将其作为错误报告给 Google 团队。
+1 用于召唤 SO 员工。看起来他们修好了。 :)

标签： php html css word-wrap

【解决方案1】：

在 CSS3 中：

word-wrap:break-word

【讨论】：

这个对我有用。并且似乎受到 Chrome/IE 的良好支持。
这很好用。您需要确保设置或绑定宽度。
尽管广泛支持自动换行，但在最新版本的 CSS3 规范中，该属性显然已被“overflow-wrap”取代：impressivewebs.com/new-css3-text-wrapoverflow-wrap 似乎没有不过，目前任何主流浏览器都支持，而自动换行是。

【解决方案2】：

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

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

我们的想法是全部使用它们，以便获得更好的跨浏览器兼容性

希望对你有帮助

【讨论】：

【解决方案3】：

我喜欢使用overflow: auto CSS 属性/值对。这将以您期望的方式呈现父对象。如果父项中的文本太宽，则滚动条会出现在对象本身内。这将使结构保持您希望的外观，并为查看者提供滚动查看更多内容的能力。

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

【讨论】：

使用overflow: auto 的另一个好处是，如果您有嵌套浮动，它可以修复 IE6 清除问题。

【解决方案4】：

我没有亲自使用过，但Hyphenator 看起来很有希望。

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

【讨论】：

【解决方案5】：

我很惊讶没有人提到我最喜欢的解决这个问题的方法之一，<wbr>（可选换行符）标签。这是相当的well-supported in browsers，基本上告诉浏览器它可以在必要时插入一个换行符。还有相关的零宽度空格字符，&#8203;，含义相同。

对于提到的用例，在网页上显示用户 cmets，我会假设已经有一些输出格式来防止注入攻击等。所以很容易在每个 N 字符中添加这些 <wbr> 标签字词太长，或在链接中。

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

【讨论】：

【解决方案6】：

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

很喜欢：

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

但这只是我。

编辑：正如 cLFlaVA 指出的那样......最好使用auto 然后scroll。我同意他的观点。

【讨论】：

【解决方案7】：

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

解决方案要么隐藏溢出（即滚动或只是隐藏），要么展开以适应。没有魔法。

问：如何将一个 100 厘米宽的物体放入只有 99 厘米宽的空间中？

答：你不能。

您可以阅读break-word

编辑

请查看此解决方案 How to apply a line wrap/continuation style and code formatting with css

或

How to prevent long words from breaking my div?

【讨论】：

我明白，但用户偶尔会这样做，所以需要一些解决方案来处理它，以免布局中断。 word-wrap 仅适用于 IE。

【解决方案8】：

我通过没有像这样固定我的右侧边栏来躲避这个问题：P

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

根据 Jon 的建议，我创建的代码：

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

【讨论】：

C#（StackOverflow 的最爱）

【解决方案11】：

我不想仅仅为了断字而在我的页面中添加库。然后我写了一个简单的函数，在下面提供，希望对大家有所帮助。

（它是由 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("&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);

【讨论】：

【解决方案12】：

将零宽度空格 (&#8203;) 添加到字符串中，它将自动换行。

这是一个 Javacript 示例：

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

【讨论】：

【解决方案13】：

我已经发布了一个解决方案，它使用 JavaScript 和一个简单的正则表达式来打破长字，这样就可以在不破坏您的网站布局的情况下进行包装。

Wrap long lines using CSS and JavaScript

【讨论】：

【解决方案14】：

我知道这是一个非常古老的问题，因为我遇到了同样的问题，所以我搜索了一个简单的解决方案。正如第一篇文章中提到的，我决定使用 php-function 自动换行。

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

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

希望这会有所帮助。

【讨论】：

我不是投反对票的人，但你读过这个问题吗？ OP说他已经尝试过，但运气不佳。请远离table（双关语）。