49

Why doesn't word wrap property work properly in the example below?

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

What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters to fit in each line.

The css is :

#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; }
4

7 回答 7

202

如果word-wrap: break-all不起作用，请尝试添加以下内容：

white-space:normal;

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

于 2015-03-02T12:36:01.433 回答
62

利用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; }

现场演示

于 2012-12-11T11:33:01.350 回答
8

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

话虽如此，分解单词的 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... long 单词在它尝试分隔长单词后在下一行所需的位置完全中断。

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

希望这可以帮助。

于 2018-09-27T19:28:20.810 回答
3

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

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
于 2016-06-20T14:57:52.227 回答
2

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

于 2013-01-07T08:54:55.370 回答
1

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

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

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

我只需要它用于表格，所以如果你想在其他元素中使用它，只需将“table”更改为“#yourId”或“.yourClass”。确保有一个父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');

我希望这个对你有用！

于 2014-10-31T13:09:46.873 回答
0

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

于 2020-10-12T02:55:25.387 回答