text-overflow

来源：互联网发布：淘宝的成功的外部原因编辑：程序博客网时间：2024/05/17 20:00

        额，最近做网站，在程序里添加标签的时候总是要测试截字，浪费了不少大好光阴啊。好不容易闲下来找了下解决的办法，谁叫我这个人比较懒呢，怕麻烦嘛。
        原来在CSS中加个代码就完成了的事。
display:block;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
加上这些代码别忘了还要设置容器的宽度，毕竟是要超出这个宽度的文字才省略，而有 overflow:hidden 这个属性的容器不设定宽度和高度的时候宽、高是会随内容增加的。
        上面这个方法貌似只对IE有效，火狐不行。（再次鄙视下浏览器的兼容性）习惯了，只能用 HACK 方法，不过好麻烦，我到不想用，因为上面的方法虽然不显示省略号，但是超出  overflow:hidden 还是有效的。
        那么，反正查到了也就顺便写上吧。
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {
width: 300px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #D4D4D4;
background: #F1F1F1;
}
li { margin: 12px 0; }
li a {
display: block;
width: 80px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

li:not(p) {
clear: both;
}
li:not(p) a {
max-width: 170px;
float: left;
}
li:not(p):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #000;
}
        主要就是那个 after  貌似我在  content: "..."; 这里引号中写什么后面就会显示什么。没什么意义，这个是不论是否超出都要在 li 的后面（after）加上这么一段，所以我觉得没意义，不用最好。

0 0