用CSS实现超出的文字显示省略号

我所知道的用CSS实现超出文字显示为省略号有2种方法。

实现方式一（单行出现省略号）：

      兼容性方面经Chrome, Safari 和 FireFox 测试都有效。

     方式一会用到 text-overflow 属性。

      先简单介绍下 text-overflow：

             text-overflow，规定文本超出边界时的显示效果。属于CSS3 ，所有主流浏览器支持。

                 text-overflow: clip | ellipsis | string ;

                    clip: 超出边界部分直接切掉，可以直接用 overflow:hidden 代替。

                    ellipsis: 用省略号来代替超出的文本。

                    string: 用给定的字符串来代替超出的文本。（在FireFox上能显示，兼容性不好，不建议使用）

.d1{      width:100px;      white-space: nowrap;      overflow: hidden;      text-overflow: ellipsis;}

实现方式二（多行出现省略号）：

      兼容性方面经测试能在Chrome, Safari 上正常显示，在FireFox上没有效果。

      实现这个功能需要注意两点：

             1. 设置文本框的高度。

             2. 高度为行高的整数倍，显示两行，则高度为行高的2倍。

       需要用到的代码：

             display: -webkit-box;    / 必须结合的属性，将对象作为弹性伸缩盒子模型显示 /

             -webkit-box-orient: vertical;   / 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 /

             -webkit-line-clamp: 2;  / 显示两行 /

             overflow: hidden;  / 超出部分隐藏 /

.text{            width: 300px;            height: 40px;            line-height: 20px;            font-size: 14px;            display: -webkit-box;            -webkit-box-orient: vertical;            -webkit-line-clamp: 2;            overflow: hidden;        }