文字 text-overflow:ellipsis,颜色不随color变化

最新推荐文章于 2024-07-24 11:39:30 发布

莹宝思密达

最新推荐文章于 2024-07-24 11:39:30 发布

阅读量354

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/miin_ying/article/details/125162144

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

解决：当前的文字外面需要再放一层，且必须为block。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .test {
            border: 1px solid;

        }
        .container {
            width: 300px;
            height: 309px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .test1 {
            color: cadetblue;
        }


        .container:hover {
            color: red;
        }
        .block{
            display:block;

        }
    </style>
</head>

<body>
    <div class='container'>
        <span class='test '>什么鬼啊啊啊啊 的范德萨发撒浮点</span>
        <span class='test1 container block' >

            <span class="test test1">
                dflksjd; fskdfj dgis ijfjgks fjksgj都看过了是是高考地理个十多个 塑料袋
            </span>
        </span>

    </div>
</body>

</html>