Question

我有这段代码：

<html>
<head>
<style type="text/css">

body {
    text-align: center;
}

#content {
    width: 60em;
    margin: 0, auto;
    background-color: #CCC;
}

</style>
</head>

<body>
<center>
<div id="content">kdsjlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkhlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkkjdghkdsfjgksdjfhg</div>
</center>
</body>

</html>

为什么文本不会留在div中，而是一行直到它结束？我希望它有相对于div里面的换行符。我怎么能这样做？

Answer 1

因为自动换行发生在之间。

至少默认情况下。 word-break property可以在某些浏览器中更改，但您应避免在内容中使用无意义的“字词”。

Answer 2

使用CSS属性“word-wrap：”

#content {
width: 60em;
margin: 0, auto;
background-color: #CCC;
word-wrap: break-word;

}

这曾经只是IE，但我看到它在Chrome和Firefox中运行。

Answer 3

<强> Example on jsFiddle

#content { word-wrap: break-word; }

文本扩展到div里面？

3 个答案: