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

巴特西

CSS3 文本超出后显示省略号...

纯用CSS实现，主要采用代码

ps:关于text-overflow的值：有三个值：

最新文章

热门文章