css3新增样式（文本效果--text-overflow 文本溢出）

最新推荐文章于 2024-04-24 17:17:21 发布

正在修炼web的小芮

最新推荐文章于 2024-04-24 17:17:21 发布

阅读量965

点赞数

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

本文链接：https://blog.csdn.net/m0_71814235/article/details/125931846

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

text-overflow 文本溢出

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，溢出的文本会被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。

语法：

text-overflow: clip|ellipsis|string|initial|inherit;

clip 剪切文本。 (这个值是这个属性的默认值)

简单理解为一刀切溢出的部分直接切掉

一定要配合不换行和溢出隐藏使用

text-overflow 需要配合以下两个属性使用：

white-space: nowrap;

overflow: hidden;

    <style>
        .box{
             width: 500px;
             height: 100px;
             margin: 10px auto 0;
        }
        .box1{
            border: 1px solid skyblue;
            /* 不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 直接用省略号来代表被修剪的文本 */
            text-overflow: ellipsis;
        }
        .box2{
            border: 1px solid skyblue;
            /* 不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /*  clip 剪切文本。 (这个值 是这个属性的默认值)
            简单理解为一刀切  溢出的部分 直接切掉
            一定要配合不换行和溢出隐藏使用*/
            text-overflow: clip;
        }
        .box3{
            border: 1px solid skyblue;
            /* 不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* *使用给定的字符串来代表被修剪的文本。 */
            text-overflow: '>>>';
        }
    </style>
</head>
<body>
    <div class="box box1">确保国家粮食安全，必须牢牢守住18亿亩耕地红线，坚决遏制耕地“非农化”、防止“非粮化”，规范耕地占补平衡</div>
    <div class="box box2">确保国家粮食安全，必须牢牢守住18亿亩耕地红线，坚决遏制耕地“非农化”、防止“非粮化”，规范耕地占补平衡</div>
    <div class="box box3">确保国家粮食安全，必须牢牢守住18亿亩耕地红线，坚决遏制耕地“非农化”、防止“非粮化”，规范耕地占补平衡</div>
</body>

预览效果图