首先,实现这种效果需要css两个属性,分别是text-overflow和white-space.
1.text-overflow有两个值,clip:表示剪切文本;ellipsis:表示用省略号代替修改的文字.
2.white-space这里只说明两个常用的值,normal:表示自动换行;nowrap:表示文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
举实例说明:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:200px;
background:#ccc;
}
</style>
</head>
<body>
<div class="test_demo">
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊（我是省略号）
</div>
</body>
</html>
这里特别要说明,不仅要text-overflow:ellipsis,还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），三个属性同时使用,只有这样才能实现溢出文本显示省略号的效果.
效果图如下:
时间： 2024-10-06 06:21:33