限制css中的文本区域

时间:2012-07-22 19:13:27

标签: html css text margin

我试图限制我可以在网站上写文字的区域。

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

当我尝试在text中写入许多字符时,超出给定空间时没有换行符。

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

}

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

我的错误是什么?

2 个答案:

答案 0 :(得分:1)

这样做: -

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

参考 LIVE DEMO

答案 1 :(得分:0)

如果您尝试执行自动换行,以下操作将起作用。

#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属性不会跟随   这个前缀约定。两个常见的例子是'自动换行'和   “文本溢出”属性,这些属性是由前缀引入的   Microsoft Internet Explorer在引入供应商之前   在CSS2.1中为政策添加前缀并随后实施   没有其他浏览器的前缀,创建了对未加前缀的依赖   尽管缺乏W3C规范,但仍有名字。

请参阅文章herew3c reference