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	使用给定的字符串来代表被修剪的文本。

转载于:https://www.cnblogs.com/hamsterPP/p/4958973.html