text-overflow: ellipsis;省略号颜色设置

参考stackoverfolow
想要给元素添加text-overflow: ellipsis;样式，必须保证改其父元素是块级元素，如果其是行级元素，可以通过设置display:block;或者display:inline-block;属性


<html>
    <body>
        <style>
            .container {
              width: 120px;
            }

            .text {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              color:#b02b7c; 
            }

            .color {
              color: black;
            }

        </style>
        <div class="container">
            <div class="text">
                <span class="color">Lorem</span> ipsum dolor sit amet, consetetur
            </div>
        </div>
    </body>
</html>

另参考IE8/9：省略号 ellipsis 之怪现象

posted @ 2016-06-16 10:52  一叶(foolishnoob)  阅读(3541)  评论(0)  编辑  收藏  举报