<!DOCTYPE html>
<html>
<head>
<meta chaset='utf-8'>
<title>HTML5自由者</title>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000;
}
</style>
</head>
<body>
<p>The following two divs contains a long text that will not fit in the box. As
you can see, the text is clipped.</p>
<p>This div uses "text-overflow:ellipsis":</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>This div uses "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>语法：text-overflow:clip | ellipsis
实现效果：
The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.
This div uses "text-overflow:ellipsis":
This div uses "text-overflow:clip":
ellipsis超出显示... clip超出直接裁切掉 但是注意CSS样式里要写：
white-sapce:nowrap; //强制文本在一行内显示
overflow:hidden; //超出隐藏掉
在IE6下和IE8下的默认样式不一样，这个地方不需要保证每个浏览器都是...的样式
IE6下的话，因为鼠标选中之后，也不会对“布局”或者“内容”造成影响，因此可以忽略掉
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
