CSS技巧汇总-优快云博客

本文总结了多项CSS技巧，包括列表横排、去除图片空白、强制文字换行、显示省略号等，同时提供了字符串截取的注意事项及不同浏览器下的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、列表横排

将li的样式设置为

li{display:block;float:left;}

//display:inline 直接横着排了

2、去除图片垂直方向的空白

最好的做法
为 img 加上 vertical-align属性

3、连续文字的强制换行l

word-break:break-all;
word-wrap:break-word;

4、文字过多显示省略号

text-overflow: ellipsis;//显示省略号
display:blcok;
white-space:nowrap;

ps:需要定义宽度

5、字符串截取问题 css截取字符串注意事项

style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
http://www.iteye.com/topic/338033

6、style=disply:none

7、style="cursor:hand;" 在IE中能正常显示成手；在firefox中却不能正常显示
style="cursor:pointer;" 则在两个浏览器下都能正常显示 ,
适用于IE6.0及以上版本以及FIREFOX，在IE5.0下不能显示成手

8、 style="overflow: hidden;white-space: nowrap;width: 80px;text-overflow:ellipsis;"
div css text-overflow设置文字截断
http://dyclh.iteye.com/blog/713685

一些链接：
a>. word-wrap和word-break
http://ice-cream.iteye.com/blog/160739
http://kennethf6986.iteye.com/blog/750724

b>.CSS Layout Properties 布局属性 (display:xxx,clear:xx,table-)
http://llsh1161.iteye.com/blog/1089561

c>.div display属性在ie和火狐下的差别(display:table及取得浏览器类型)
http://www.iteye.com/topic/214802

d>.IE与火狐差异
http://mojianpo.iteye.com/blog/775160
http://myzone.iteye.com/blog/474426
http://woaiguangxi.iteye.com/blog/700489