CSS3 text-overflow 属性

最新推荐文章于 2023-02-23 16:54:26 发布

Dariuslwk

最新推荐文章于 2023-02-23 16:54:26 发布

阅读量229

点赞数

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

本文链接：https://blog.csdn.net/qq_44158936/article/details/104985668

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1、定义与用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

2、案例分析

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多行文本溢出时发生的效果</title>
        <style type="text/css">

            .text{
                margin: 0 auto;
                width: 150px;
                height: 20px;
                border: 1px solid red;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
    <div class="text 1" style="text-overflow: ellipsis;">多行文本溢出显示省略号</div>
    <br>
    <div class="text 2" style="text-overflow: clip;">多行文本溢出显示被裁减</div>
    </body>
</html>

在这里插入图片描述

细心你会发现 text-overflow:ellipsis; 不可独立使用 ，必须结合 overflow:hidden; white-space:nowrap; 才生效。

然而 white-space:nowrap; 是指不换行，就是说只能一行显示。

Dariuslwk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 text-overflow 属性

1、定义与用法text-overflow 属性规定当文本溢出包含元素时发生的事情。text-overflow: clip|ellipsis|string;值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。2、案例分析<!DOCTYPE html> <...
复制链接

扫一扫