文本超出容器div范围

Question

我是一个有用的助手，可以帮助您翻译文本。

我有这个代码片段，当文本到达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;

}

- Blake

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

- amol

---

分割单词，我不喜欢。 - Dennis

Answer 2

实时演示 http://codepen.io/elad2412/pen/LAhJw

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

- Elad Shechter

---

在我的情况下，宽度百分比不起作用是因为容器是可滚动的。因此，我不得不添加 { word-break:break-all; max-width: 65%; } - Hunnain

Answer 3

我遇到了相同的问题，单词换行看起来不太美观 - 所以我发现将以下CSS应用于容器可以解决：

 text-overflow: ellipsis;
 overflow: hidden;

省略号在浏览器中也得到了很好的支持，在这里阅读更多关于省略号的内容

- Josh Harris

Answer 4

在我的情况下，结果是这样的：

something something

“counts as a single long word and hence went outside the div”

通过以下方式进行修复：

something  something

- Dennis

Answer 5

由于文本中没有空格，因此不会创建新行。

尝试添加：

[空格]/( )/( )

例如，我将我的文本更改为：

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

转换为：

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx

它将创建自己的新行。

- Dwipa Arantha

Answer 6

你可以使用 width:auto;，但如果你想要特定的 width:400px;，你可以使用 word-wrap:break-word 或者 word-wrap:break-all;

- Sam

---

我建议使用 width: fit-content;。 - Ani Naslyan