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

你可以看到肺炎。。。长单词在尝试分离长单词后，在下一行中准确地断开它需要的位置。

相比之下，我们有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>

最后对于hyphens有自己独特的拆词方式。有关更多信息，请查看文档。同样值得注意的是，不同的语言有不同的分词方式，但幸运的是，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会打断字(在任意位置将其拆分为碎片)，而不是适当的包装。

Answer 6

因为css换行并不适用于所有浏览器，所以请改用JavaScript！它应该给出同样的结果。

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

该函数检查元素的宽度是否大于其父元素的宽度，如果有，则会断开所有而不是仅断开单词。我们不希望孩子长得比父母大，对吧？

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

如果它将转到else，它将更改为单词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;。出于某种原因，它似乎被弃用了，但它是唯一对我有用的东西。我需要的只是打破那些太长的、需要打破的文字。