限制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参考 。