Question

我有这个codepen here，当文本到达div的右边界时，文本是否应该转到新行？

HTML：

<div class="test">

    <p>dfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodj</p>
</div>

的CSS：

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;

}

Answer 1

使用word-wrap:break-word

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;
    word-wrap:break-word;
}

Answer 2

实例 http://codepen.io/elad2412/pen/LAhJw

div.test {word-break:break-all;}

Answer 3

我遇到了同样的问题，单词中断对我来说看起来不太漂亮 - 所以我发现将下面的CSS应用到容器中：

 text-overflow: ellipsis;
 overflow: hidden;

省略号也有很好的浏览器支持，read more about ellipsis here

Answer 4

就我而言，事实证明是这样的：

something&nbsp;something

算作单个长词，因此超出了div

通过执行

修复它

something&nbsp; something

Answer 5

由于文字没有任何空格，因此不会创建新行。

尝试放置：

[space]/( )/( )

例如，我改变了我的文字：

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

成：

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx

它将创建自己的新行。

Answer 6

您可以执行try，但如果您需要特定的width:auto;，则可以使用width:400px;或word-wrap:break-word

文字在外面包含div

6 个答案: