text-overflow属性是当文本溢出它的容器盒时文本的显示(还必须定义容器盒overflow:hidden),看如下例子,我在<p>元素上引用该属性:
div.example { width: 200px; height: 85px; margin-bottom: 20px; padding: 5px 10px; overflow: hidden; border:1px solid #ccc; background-color: #eee; } div.example p { width: 200px; height: 85px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
你可以看到,我故意在这个例子里引入一段很长的话,这样它就会溢出200px宽的<div>盒子。当设置text-overflow:ellipsis,文本溢出时显示更美观的省略号代替不美观的裁切行为。结果如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,width=device-width"> <title>使用CSS3的text-overflow属性控制文本溢出</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="shortcut icon" href="favicon.ico"> </head> <body> <style type="text/css"> div.example { width: 200px; height: 85px; margin-bottom: 20px; padding: 5px 10px; overflow: hidden; border:1px solid #ccc; background-color: #eee; } div.example p { width: 200px; height: 85px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } </style> <div class="example"> <p>text-overflow属性规定当文本溢出包含元素时发生的事情。默认值为clip。值为clip时修剪文本。值为ellipsis时,显示省略符号来代表被修剪的文本。值为string时,使用给定的字符串来代表被修剪的文本。</p> </div> </body> </html>
text-overflow属性规定当文本溢出包含元素时发生的事情。默认值为clip。值为clip时修剪文本。值为ellipsis时,显示省略符号来代表被修剪的文本。值为string时,使用给定的字符串来代表被修剪的文本。
text-overflow:ellipsis对你的工具包来说不是一项至关紧要的新补充。不过如果你想让潜在的文本溢出时看起来少一点不美观,它是一项有益的补充。主流的现代浏览器都支持text-overflow:ellipsis。