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 在IE8中不能顯示省略號的問題多行文本溢出顯示省略號(…) text-overflow: ellipsis 多行文本溢出顯示省略號(…) text-overflow: ellipsis text-overflow:ellipsis實現超出隱藏時省略號顯示 text-overflow:ellipsis溢出顯示省略號兼容所有瀏覽器的解決辦法 CSS3：text-overflow實現文字截取，超出部分顯示省略號問題1：設置了text-overflow : ellipsis未起作用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 5. 【原創】table設置text-overflow: ellipsis;（超出范圍顯示...）不生效