CSS3 文本超出后顯示省略號...

純用CSS實現，主要采用代碼

overflow:hidden;

text-overflow:ellipsis;//這是讓文本溢出后，顯示成省略號。

white-space:nowrap;//禁止自動換行

 

栗子html

<div class="div1">    ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>

栗子的css

.div1{
            width: 100px;
            height: 100px;
            border:2px solid black;
            overflow:hidden;
            text-overflow: ellipsis;
            /*-webkit-text-overflow:ellipsis;*/
            white-space: nowrap;
        }

在ie6~8和chrome下顯示都是：

 

鼠標懸停時顯示被省略的內容：

設置CSS

.div1:hover{
            overflow:visible;
        }

 

 

 

另外：由於這個只是針對溢出文本的效果。所以如果div內是p元素，那么溢出的p元素不會顯示成...。至少在ie8+,和chrome中，p元素並不會變成省略號，而是直接被裁剪掉了。

用ietester測試ie6、7則會顯示溢出的P元素為省略號。

所以，若想要P元素溢出后也顯示成省略號效果，需要單獨給p元素設置over-flow:hidden;text-overflow:ellipsis;

 

ps:關於text-overflow的值：有三個值：

clip|ellipsis|string 默認clip

值	描述
clip	修剪文本。
ellipsis	顯示省略符號來代表被修剪的文本。
string	使用給定的字符串來代表被修剪的文本。