为什么自动换行在 CSS3 中不能正常工作？

Question

为什么自动换行属性在下面的示例中不能正常工作？

http://jsfiddle.net/k5VET/739/

我能做些什么来确保“consectetur”这个词的一部分适合第一行本身？我希望每行能容纳最大数量的字符。

css 是：

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-wrap:break-word;
    border:2px solid; }

Answer 1

如果word-wrap: break-all 不起作用，请尝试同时添加：

white-space:normal;

使用 Bootstrap 3 中的 .btn 类为我工作

Answer 2

使用word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
word-break: break-all;
    border:2px solid; }

LIVE DEMO

Answer 3

好的，我知道这是一个老问题，但我认真地认为，何时使用哪个属性可能会有一些有用的说明。看看现有的答案，我觉得他们提供了没有解释的解决方案，所以这是我试图帮助解决的问题。对于上下文，默认情况下，容器不会尝试拆分单个长单词，因为它希望保留单词的原始形式。

话虽如此，分解单词的三种主要方法是overflow-wrap、word-break和hypens。不过，我不会深入研究炒作。

所以首先。 我看到问题中使用了word-wrap，但阅读了已弃用的文档，一些浏览器决定简单地将其别名为overflow-wrap。最好不要使用它。

这两个属性之间的区别在文档中非常清楚，但为了清楚起见，overflow-wrap 实际上只有两个可能的值，并且会检测单词是否溢出。如果是这样，默认情况下它会将整个单词移动到下一行。如果设置了break-word，则只有在不能将整个单词放在该行上时才会拆分单词。

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    overflow-wrap: break-word;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

您可以看到 pneumonoul... 长单词在尝试分隔长单词后在下一行准确地中断。

现在相比之下，我们有word-break。这具有更精细的属性，实际上还有一个break-word 选项。这是上述 sn-p 的同义词，因此我认为何时使用其中一个非常简单。

但是，word-break 还提供了一个 break-all 值，该值将尽可能地打破单词以适应最初预期的单词。它不会试图弄清楚它是否需要将单词放在新行上——它只是将换行符推到它溢出的地方。这里与上面最大的区别是我们使用的长词现在仍然在顶部。

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-break: break-all;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

然后终于hyphens有了自己特殊的断词方式。欲了解更多信息，请查看documentation。还值得注意的是，不同的语言有不同的分词方式，但幸运的是hyphens 属性挂钩到lang 属性并了解该做什么。

人们建议的另一种选择是使用white-space 属性，它试图通过空格 分解文本。在我使用的示例中，这对我们的情况没有帮助，因为单词本身比容器长。我认为关于这个 CSS 属性需要注意的重要一点是，它不会尝试分解单词本身，而是尝试在适当的时候通过空格来实现。

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    white-space: normal;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

希望这会有所帮助。

Answer 4

这对于在一行中换行很有用：

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

Answer 5

它没有正确换行，因为默认情况下浏览器不应用自动断字（这将是导致 正确 换行的方式）。您需要使用 CSS 断字或基于 JavaScipt 的断字。设置word-wrap:break-word，以及word-break: break-all，根据定义break 单词（在任意点将它们拆分为片段），而不是正确的包装。

Answer 6

由于 css 自动换行不适用于所有浏览器，请改用 JavaScript！它应该给出相同的结果。

下面的函数需要 JQuery，它会在每次调整窗口大小时运行。

该函数检查元素是否比其父元素具有更大的宽度，如果有，它会破坏所有而不是只破坏单词。我们不希望孩子长得比父母大，对吧？

我只需要它用于表格，所以如果你想在其他元素中使用它，只需将“table”更改为“#yourId”或“.yourClass”。确保有一个 parent-div 或将“div”更改为“body”或其他什么？

如果它会转到 else，它会更改为 word-break，然后检查它是否应该变回，这就是为什么有这么多代码.. :'/

$(window).on('resize',function() {
    $('table').each(function(){
        if($(this).width() > $(this).parent('div').width()){
            $(this).css('word-break', 'break-all');
        }
        else{
            $(this).css('word-break', 'break-word');
            if($(this).width() > $(this).parent('div').width()){
                $(this).css('word-break', 'break-all');
            }
        }
     });
}).trigger('resize');

我希望它对你有用！

Answer 7

为了只打断长词，我使用了word-break: break-word;。 由于某种原因，它似乎已被弃用，但它是唯一对我有用的东西。 我需要的是只打破那些太长且需要打破的词。