[CSS realize the character limit shown, beyond the show "..."]
One, background
In a real project, we often need to show some pages for certain areas of a specified number of content beyond the content shows "..." to beautify the page, then it should be how to do it? Today, let us look at how to achieve this effect.
Second, the implementation steps
CSS code
.ov{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}So that we achieve this effect, but with the proviso that: the content to be displayed only in a row, can not have line breaks occur, or does not work.
Test code
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>测试超出显示点点点</title>
6 <style type="text/css">
7 .ov{
8 white-space:nowrap;
9 overflow:hidden;
10 text-overflow:ellipsis;
11 width:200px;
12 margin:30px auto;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="ov">
18 测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点
19 </div>
20 </body>
21 </html>Display as follows:
