为什么自动换行在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; }

现场演示

Answer 3

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

话虽如此overflow-wrap，分解单词的3 种主要方法是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选项。这是上述代码段的同义词，因此我认为何时使用其中一个是非常微不足道的。

但是，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>

然后终于forhyphens有自己特殊的分手方式的话。有关更多信息，请查看文档。还值得注意的是，不同的语言有不同的分解单词的方式，但幸运的是，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>

希望这可以帮助。