不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

常用技巧:CSS实现文字截断并且添加省略号

web 建伟 3707℃ 0评论

在做自适应网站中,比较好用的一个技巧。代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>css文字截断</title>
 </head>
 <style>
 body{
 background-color:#f4f4f4;
 font-size:12px;
 }
 .text-overflow{
 width:200px;
 height:100px;
 border:1px solid red;
 border-top:4px solid red;
 padding:10px;
 overflow:hidden;;/* 内容超出宽度时隐藏超出部分的内容 */
 text-overflow:ellipsis;;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
 white-space:nowrap;/* 不换行 */
 }
 </style>
 <body>
 <div class='text-overflow'>我来测试一下这个文字截断是不是真的有效果</div>
 </body>
</html>

效果如下:

QQ截图20160611140016

转载请注明:Li Jianwei's Blog » 常用技巧:CSS实现文字截断并且添加省略号

喜欢 (2)or分享 (0)
web技术交流群
22765697