限制CSS中的文字區域

Question

我試圖限制我可以在網站上寫文本的區域。

<div id="header">
<div id="text"> 
     sample text 
</div>
</div>

當我嘗試在text寫入許多字符時，如果超過給定的空格，則不會出現換行符。

#header
{
 background-color: #fff;
 height: 100px;

}

#text
{
 margin-left: 200px;
 width: 200px;
}

我怎么了

Answer 1

這樣做：

#text
{
    margin-left: 200px;
    width: 200px;
    border: 1px solid;
    word-wrap: break-word;  
}​

請參考現場演示

Answer 2

如果您嘗試執行自動換行，則可以執行以下操作。

#text{ 
   word-wrap: break-word;      /* Most modern browsers */       
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* older versions of Opera */   

}

word-wrap屬性不僅限於較新的瀏覽器。 較舊的瀏覽器似乎也支持它。

根據CSS3草案，

由於遺留原因，某些實驗性CSS屬性未遵循此前綴約定。 兩個常見的示例是'word-wrap'和'text-overflow'屬性，它們是由Microsoft Internet Explorer引入的，而不是在CSS2.1中引入供應商前綴策略之前，隨后又由其他瀏覽器實現的，沒有創建前綴。盡管缺少W3C規范，但仍依賴未前綴名稱。

請參閱此處的文章和w3c參考 。