截字是一个很恶心的问题。为了照顾表现上的需要，通常需要把过长的句子，比如一个列表中的新闻标题，截短。

　　通常这由程序员使用后台技术(各种流行的语言，PHP, JSP等)或者前台技术(JavaScript)来处理。我个人倾向于使用前台技术，因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中，用户可以更方便的掌握信息完整性。

　　text-overflow是CSS3的一个性质(property)，它可以截短过长的字符串，并依据值(value)来决定被截掉部分使用 何种方式展现。目前，IE已经实现对其的支持，Opera也有了私有属性(-o-text-overflow)对其支持，Firefox似乎落后一步…… 支持的两者都可使用ellipsis 值，把截掉部分替代成省略号(即ellipsis)。

　　所以，你要做的只是，把需要截字的元素定好宽度，和overflow一起使用，即可实现效果。

　　但是Firefox不支持，所以大概你知道我下面要干什么了。　:)

　　先可以看看Yahoo某大牛的解决方案:http://blog.360.yahoo.com/blog-ktYYK_s5fqJ2Hu1ryv2QSL0-?p=120。大牛就是大牛，XBL和JavaScript双管齐下。

　　然后，我的解决方案是，利用伪类:after增加省略号，再把它定位到右边即可。效果有点粗糙，但简洁明了，纯CSS实现。

　　具体过程不说了，看案例，有兴趣者看看源码，很容易理解的。

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
            }
        a {
            text-decoration: none;
            color: #df3a0e;
            }
        ul {
            width: 200px;
            margin: 40px auto;
            padding: 12px 4px 12px 24px;
            border: 1px solid #005fb0;
            background: #e0f1ff;
            }
        li {
            margin: 12px 0;
            width: 200px;
            }
        li a {
            display: block;
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            }
       
        /* firefox only */
        li:not(p) { /* wtf is? pls let me know*/
            clear: both;
            }
        li:not(p) a {
            max-width: 170px;
            float: left;
            }
        li:not(p):after {
            content: "...";
            float: left;
            width: 25px;
            padding-left: 5px;
            color: #df3a0e;
            }
    </style>

Tags: divcss   |

原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.net/

本文链接地址：http://www.busfly.net/post/CSS-div-text-overflow-ellipsis.html

如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~