文本擴展到它內部的div之外？

我有這樣的代碼：文本擴展到它內部的div之外？

<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的換行符。我怎樣才能做到這一點？

來源

2010-12-20 DarkLightA

因爲文字換行發生在之間之間的單詞。

至少默認。在某些瀏覽器中，word-break property可以改變這種情況，但是您應該避免在內容中出現無意義的「單詞」。

來源

2010-12-20 11:59:44 Quentin

現在我覺得愚蠢：d – DarkLightA 2010-12-20 12:06:50

使用CSS屬性「自動換行：」

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

}

過去，這隻能是IE瀏覽器，但我已經看到它在Chrome和Firefox的工作。

來源

2010-12-20 12:01:18 Kyle

Example on jsFiddle

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

來源

2010-12-20 12:03:31 BrunoLM

文本擴展到它內部的div之外？

回答

相關問題