我试图限制我可以在我的网站上写文字的区域。
<div id="header">
<div id="text">
sample text
</div>
</div>
当我尝试在 中写入许多字符时text
,超出给定空间时没有换行符。
#header
{
background-color: #fff;
height: 100px;
}
#text
{
margin-left: 200px;
width: 200px;
}
我的错误是什么?
这样做: -
#text
{
margin-left: 200px;
width: 200px;
border: 1px solid;
word-wrap: break-word;
}
参考现场演示
如果您尝试执行自动换行,以下将起作用。
#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' 属性,在 CSS2.1 中引入供应商前缀策略之前,Microsoft Internet Explorer 引入了无前缀,随后其他浏览器实现了无前缀,创建了一个尽管缺乏 W3C 规范,但仍依赖于不带前缀的名称。