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

本文转载自查看原文 2016-06-16 10:52 1835 css/ ellipsis color

参考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 之怪现象

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 多行文本溢出显示省略号(…) text-overflow: ellipsis 多行文本溢出显示省略号(…) text-overflow: ellipsis text-overflow:ellipsis实现超出隐藏时省略号显示问题1：设置了text-overflow : ellipsis未起作用 CSS中的text-overflow:clip|ellipsis的使用 vue项目text-overflow:ellipsis;在生产环境上不显示...的问题设置text-overflow文本溢出隐藏时的对齐问题 CSS学习笔记：溢出文本省略（text-overflow） css怎么设置超出几行显示省略号？ css设置使文字显示2行多余的为省略号。。。