div多出文字隐藏并用省略号代替

最新推荐文章于 2023-02-02 17:11:34 发布

原创最新推荐文章于 2023-02-02 17:11:34 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS样式，当div内的文字内容超出限制时，进行隐藏并显示省略号，以达到良好的文本展示效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, ol {
            list-style: none;
        }
        .box {
            margin: 20px auto;
            width: 300px;
        }
        .box li {
            padding: 0 5px;
            line-height: 35px;
            border-bottom: 1px dashed #AAA;
            cursor: pointer;

            /*超出一行的内容自动裁切,以省略号代替*/
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .bgColor {
            background-color: lightcyan;
        }
    </style>
</head>
<body>
<ul class="box" id="box">
    <li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
    <li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
    <li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
    <li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
    <li>一剑光寒十九洲剑光寒十九洲剑光寒十九洲</li>
</ul>
<script src="js/changeColor.js"></script>
</body>
</html>