如有必要，如何允许文本自动换行？

Question

我正在寻找最好的解决方案，以便在必要时允许文本在单词中间换行。我所说的“最好”是指与大多数浏览器兼容，并且会在单词内部断词之前支持断词。

如果标记看起来比我的更好（请参阅我的答案），也会有所帮助。

编辑：

请注意，这是专门针对用户生成的内容的。

编辑 2：

相关网站上大约 25% 的 Firefox 用户仍在使用 v3.0 或更低版本，因此支持他们至关重要。这是基于上个月的数据（约 121,000 次访问）。

Answer 1

如果长单词对于容器来说太长，CSS 属性 word-wrap:break-word 将强制长单词换行到下一行。 IE（可以追溯到很久以前）、Firefox 和 Safari 均支持此功能。

编辑：看起来您也可以在旧版本的 Firefox 中使用 white-space: -moz-pre-wrap 和 white-space: pre-wrap 来实现此目的>。请参阅此处了解更多信息。不过我还没有在旧版本的 Firefox 上测试过这一点。

Answer 2

由于没有明确的答案（取决于您的需求，例如，您想要连字符吗？您必须支持哪些浏览器？），我通过 Adobe BrowserLab 了解选项是什么：

如果不需要连字符，则使用 可以获得最佳兼容性。如果您需要连字符，那么使用 ­ 是您的最佳选择，但请注意，这在 Firefox 2.0 Mac/Windows 或 Safari 3.0 中不起作用（在字符处换行）。

并且，请注意，如果您选择通过使用溢出、滚动或允许在字符处换行来根本不处理长单词，则 IE6 和 IE7 都会通过扩展容器宽度来响应（至少使用 DIV我用过），所以要小心。

结果：

Browser                     Method                   Wraps at char    Adds Hyphens    Overflows horizontally    Container expands horizontally
----------------------------------------------------------------------------------------------------------------------------------------------
Firefox 3.0 - Windows XP    None                     No               No              Yes                       No
Firefox 3.0 - Windows XP    <wbr>                    Yes              No              No                        No
Firefox 3.0 - Windows XP    ­ or ­          Yes              Yes             No                        No
Firefox 3.0 - Windows XP    word-wrap: break-word    No               No              Yes                       No
IE7 - Windows XP            None                     No               No              No                        Yes
IE7 - Windows XP            <wbr>                    Yes              No              No                        No
IE7 - Windows XP            ­ or ­          Yes              Yes             No                        No
IE7 - Windows XP            word-wrap: break-word    Yes              No              No                        No
Firefox 3.0 - OS X          None                     No               No              Yes                       No
Firefox 3.0 - OS X          <wbr>                    Yes              No              No                        No
Firefox 3.0 - OS X          ­ or ­          Yes              Yes             No                        No
Firefox 3.0 - OS X          word-wrap: break-word    No               No              Yes                       No
Safari 3.0 - OS X           None                     No               No              Yes                       No
Safari 3.0 - OS X           <wbr>                    Yes              No              No                        No
Safari 3.0 - OS X           ­ or ­          No               No              No                        No
Safari 3.0 - OS X           word-wrap: break-word    Yes              No              No                        No
Chrome 3.0 - Windows XP     None                     No               No              Yes                       No
Chrome 3.0 - Windows XP     <wbr>                    Yes              No              No                        No
Chrome 3.0 - Windows XP     ­ or ­          Yes              Yes             No                        No
Chrome 3.0 - Windows XP     word-wrap: break-word    Yes              No              No                        No
Firefox 2.0 - OS X          None                     No               No              Yes                       No
Firefox 2.0 - OS X          <wbr>                    Yes              No              No                        No
Firefox 2.0 - OS X          ­ or ­          No               No              Yes                       No
Firefox 2.0 - OS X          word-wrap: break-word    No               No              Yes                       No
Firefox 2.0 - Windows XP    None                     No               No              Yes                       No
Firefox 2.0 - Windows XP    <wbr>                    Yes              No              No                        No
Firefox 2.0 - Windows XP    ­ or ­          No               No              Yes                       No
Firefox 2.0 - Windows XP    word-wrap: break-word    No               No              Yes                       No
Firefox 3.5 - Windows XP    None                     No               No              Yes                       No
Firefox 3.5 - Windows XP    <wbr>                    Yes              No              No                        No
Firefox 3.5 - Windows XP    ­ or ­          Yes              Yes             No                        No
Firefox 3.5 - Windows XP    word-wrap: break-word    Yes              No              No                        No
Firefox 3.5 - OS X          None                     No               No              Yes                       No
Firefox 3.5 - OS X          <wbr>                    Yes              No              No                        No
Firefox 3.5 - OS X          ­ or ­          Yes              Yes             No                        No
Firefox 3.5 - OS X          word-wrap: break-word    Yes              No              No                        No
IE6 - Windows XP            None                     No               No              No                        Yes
IE6 - Windows XP            <wbr>                    Yes              No              No                        No
IE6 - Windows XP            ­ or ­          Yes              Yes             No                        No
IE6 - Windows XP            word-wrap: break-word    Yes              No              No                        No
IE8 - Windows XP            None                     No               No              Yes                       No
IE8 - Windows XP            <wbr>                    Yes              No              No                        No
IE8 - Windows XP            ­ or ­          Yes              Yes             No                        No
IE8 - Windows XP            word-wrap: break-word    Yes              No              No                        No
Safari 4.0 - OS X           None                     No               No              Yes                       No
Safari 4.0 - OS X           <wbr>                    Yes              No              No                        No
Safari 4.0 - OS X           ­ or ­          Yes              Yes             No                        No
Safari 4.0 - OS X           word-wrap: break-word    Yes              No              No                        No

示例 HTML：

<html>
    <head>
        <style>
            div {
                width: 4em;
                border: 1px solid black;
                margin-bottom: 6em;
                padding: .25em;
            }
        </style>    
    </head>
    <body>
        This is text easily contained by the DIV:
        <div>proper width</div>

        A long word with no character breaking:
        <div>
            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        </div>

        <i><wbr></i> tag:
        <div>
            A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
        </div>

        <i>&shy;</i> character:
        <div>
            A­R­e­a­l­l­y­L­o­n­g­W­o­r­d­T­h­a­t­N­e­e­d­s­T­o­B­e­B­r­o­k­e­n A­n­d­A­n­o­t­h­e­r­W­o­r­d
        </div>

        <i>overflow: scroll</i> CSS attribute:
        <div style="overflow: scroll">
            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        </div>

        <i>word-wrap: break-word</i> CSS attribute:
        <div style="word-wrap: break-word">
            AReallyLongWordThatNeedsToBeBroken AndAnotherWord
        </div>
    </body>
</html>

Answer 3

我的答案来自这个问题的另一个实例，可以在 Wrapping long text in CSS ：

我使用组合

word-wrap: break-word;
overflow: hidden;

来处理这个问题。 word-wrap 设置将允许单词在支持该属性的浏览器中进行换行，无论单词的长度如何，而 overflow 设置将导致单词在末尾被截断无法识别自动换行的浏览器中的可用空间。这与您在不使用 JavaScript 的情况下可能获得的降级效果差不多。

Answer 4

[编辑：OP更新了他的问题，说这是专门针对用户生成的内容的；下面的内容不会（很容易）工作（你必须有自己的连字符字典）。不过，将其留在这里，以防万一有人发现此问题并需要 HTML 选项来执行此操作。]

您可以使用软连字符（也称为可选连字符；­ 或 & ＃173；）。它早在 HTML4 中就已定义。我从未使用过它，但我只是尝试过，它至少适用于：IE6、IE7、Chrome 4、FF 3.6 和 Safari 4。

有人可能认为用户代理（浏览器）应该自动处理这个问题（使用文档所用语言的连字符字典）。 实际上，我不知道有哪个网络浏览器可以自动执行此操作。显然，如果您告诉现代浏览器它们可以，现代浏览器就会自动执行此操作；请参阅 wsanville 对 CSS 选项的回答。

Answer 5

我在这里找到了类似的答案：
http://css-tricks。 com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

更强大的浏览器支持

仅 CSS

-ms-word-break: break-all;

     /* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

如果您的文本是 PHP 生成的< /strong> 你有一个 PHP 函数：

wordwrap

<?php
  $text = "The quick brown fox jumped over the lazy dog.";
  $newtext = wordwrap($text, 20, "<br />\n");

  echo $newtext;
?>

另外，如果您知道分隔符，您可以尝试 PHP 函数爆炸。
使用 for 循环后显示（分解返回一个数组）。

Answer 6

您可能需要检查 word-wrap: break-word CSS 属性。

以下示例适用于 Google Chrome 4.0、Firefox 3.5.7、Safari 4.0.4 和 IE 8：

<html>
<body>
    <div style="word-wrap: break-word; width: 50px;">
        Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq
    </div>
</body>
</html>

不幸的是，正如 BalusC 在对其中一个答案的评论中，上面的不适用于 3.5 之前的 Firefox 版本。由于使用旧版本 Firefox 的用户数量似乎低于约 6% ，如TJ Crowder 指出，对于不支持自动换行的浏览器，您可能需要回退到overflow:scroll。它可能看起来不太好，但是如果您不希望很多单词比分配的空间长，那么其中一个用户看到滚动条的概率会非常低，并且随着时间的推移，它会变得更低，用户升级浏览器。至少在这些情况下你会优雅地失败。

Answer 7

过去，我使用过类似的东西（当时在 Safari 上不起作用，IIRC，但那是几年前的事了）：

AVerLonngWord AndA notherWord

（我会动态生成这个，以便做布局的人不会看到这样的暴行。）

Answer 8

在您想要断行的位置输入键盘换行符。

例如。

Thisisverylongword

会变成

Thisisavery
长字