文本溢出隐藏变成省略号

最新推荐文章于 2024-06-05 09:45:20 发布

panliyou

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量1.1k

点赞数 2

分类专栏： html和css的那些事 web前端开发文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_39411655/article/details/112794228

版权

html和css的那些事同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web前端开发

8 篇文章 0 订阅

订阅专栏

文本溢出隐藏变成省略号

1.单行文本溢出隐藏变成省略号

1.文本不换行强制文本在一样显示
white-space: nowrap;
2.溢出隐藏
overflow: hidden;
3.文字溢出部分变成省略号…
text-overflow: ellipsis;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px;
            width: 200px;
            /* 文本不换行强制文本在一样显示 */
            white-space: nowrap;
            /* 内容溢出隐藏 */
            overflow: hidden;
            /* 文字溢出部分变成省略号... */
            text-overflow: ellipsis;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <div class="box">我是单行文本，溢出隐藏变成省略号</div>

</body>

</html>

2.多行文本溢出隐藏变成省略号

设置盒子模型为弹性盒子模型
display: -webkit-box;
控制容器内容部分垂直显示
-webkit-box-orient: vertical;
控制显示的行数
-webkit-line-clamp: 2;
溢出的部分隐藏
overflow: hidden;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px;
            width: 200px;
            /* 多行文本溢出变成省略号 */
            /* 1. 设置盒子模型为弹性盒子模型 */
            display: -webkit-box;
            /* 2. 控制容器内容部分垂直显示 */
            -webkit-box-orient: vertical;
            /* 3. 控制显示的行数 */
            -webkit-line-clamp: 2;
            /* 4. 溢出的部分隐藏 */
            overflow: hidden;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <div class="box">
        我是多行文本，溢出隐藏变成省略号
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel eaque distinctio fuga tenetur dolorem labore
        excepturi, temporibus velit praesentium quibusdam reiciendis autem culpa hic error aliquid id? Minus, ex
        consectetur!

    </div>

</body>

</html>

panliyou

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
文本溢出隐藏变成省略号

文本溢出隐藏变成省略号1.单行文本溢出隐藏变成省略号1.文本不换行强制文本在一样显示white-space: nowrap;2.溢出隐藏overflow: hidden;3.文字溢出部分变成省略号…text-overflow: ellipsis;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont
复制链接

扫一扫