Question

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

我能做些什么来确保'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

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

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

该函数检查元素是否具有比其父元素更宽的宽度，如果有，则它会中断所有元素而不是单词。我们不希望孩子们比他们的父母变大，对吗？

我只需要表格，所以如果你想要它在其他元素中，只需改变＆＃34; table＆＃34;到＆＃34; #yourId＆＃34;或＆＃34; .yourClass＆＃34;。确保有父div或更改＆＃34; div＆＃34;到＆＃34;身体＆＃34;还是什么？

如果它转到其他地方，它会更改为分词，然后检查它是否应该更改，这就是为什么代码太多了......：＆＃39; /

$(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 4

这对于将文本包装在一行中非常有用：

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

Answer 5

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

话虽这么说，分解单词的3种主要方法是overflow-wrap，word-break和hypens。不过，我不会深入了解hypen。

所以首先。 我看到问题中使用了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终于有了他们自己的特殊单词分解方法。有关更多信息，请查看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 6

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

为什么自动换行在CSS3中没有正常工作？

6 个答案: