好吧,这真把我搞糊涂了。我在一个div里面有一些内容,就像这样:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

但是,由于“word”太长,内容会溢出DIV(正如预期的那样)。

我怎么能迫使浏览器在必要的地方“打破”这个词,以适应里面的所有内容?


当前回答

用word-break: normal似乎比用word-break: break-word更好,因为break-word会打断EN这样的首字母

word-break: normal

其他回答

这可以添加到“跨浏览器”解决方案的可接受答案中。

来源:

http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

中数:

overflow-wrap CSS属性指定浏览器是否应该在单词中插入换行符,以防止文本溢出其内容框。 与换行符相反,溢出自动换行只在整个单词不能被放置在自己的行上而不溢出时才会创建换行符。

所以你可以用:

overflow-wrap: break-word;

我能用吗?

我不确定浏览器的兼容性

word-break: break-all;

你也可以使用<wbr>标签

<wbr>(换字)表示:“浏览器 可以在这里插入换行符吗 愿望。”浏览器不会思考 换行没有必要 发生了。

我用下面的代码解决了这个问题。

display: table-caption;
.word-break {
   word-break: keep-all;
   word-wrap: break-word;
}