CSS属性，以便<div>元素内的文本不会扩展到<div>的背景之外

Question

我可以添加什么来添加CSS属性，以便div元素中的文本不会延伸到我的背景颜色之外？我猜测因为div元素的实际宽度是整页的宽度，所以我必须收缩我的div元素。

请参见此处的示例

example

<div class="test">sadfssdfjklsdfjklsdfsdfksdfkhsdfksdfkhsdfkhsdkhfsdhkfksdhkhsdfkhsdk</div>

.test {
background: grey;
width: 400px;
height: 100px;
}

Answer 1

您可以使用以下CSS：

.test {
  background: grey;
  width: 400px;
  height: 100px;
  word-wrap: break-word;
}

word-wrap说：

  

自动换行属性用于指定浏览器是否可以在单词中断行，以防止在其他不可破坏的字符串太长而无法放入其包含框中时溢出。

查看fiddle的内容。

Answer 2

在这种情况下，我使用以下CSS的组合。

text-overflow: ellipsis会显示实际存在的文本比显示的文本多（使用省略号（...）符号）.. overflow: hidden确保没有内容消失父边界和white-space: nowrap确保文本只保留在一行中。

overflow:hidden;
white-space: nowarp;
text-overflow: ellipsis;

jsfiddle.net/josangel555/6d0wz2Lc/

Answer 3

您应该将 overflow：auto; 与自动换行：break-word; 一起添加到

.test {
background: grey;
width: 400px;
height: 100px;
}

如果div中的文本大于div大小，则允许自动滚动。

Answer 4

只需在代码中添加word-wrap: break-word;即可。

.test {
    background: grey;
    width: 400px;
    height: 100px;
    word-wrap:break-word;
}

以下是您的示例的updated JSFiddle。此外，请查看word-wrap属性documentation，了解为何可以使用此方法以及将来可能对您使用的属性值。