我试图限制我可以在网站上写文字的区域。
<div id="header">
<div id="text">
sample text
</div>
</div>
当我尝试在text
中写入许多字符时,超出给定空间时没有换行符。
#header
{
background-color: #fff;
height: 100px;
}
#text
{
margin-left: 200px;
width: 200px;
}
我的错误是什么?
答案 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规范,但仍有名字。
请参阅文章here和w3c reference。