多行文字省略号

最新推荐文章于 2024-07-14 03:50:55 发布

十友九

最新推荐文章于 2024-07-14 03:50:55 发布

阅读量171

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106150983

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文字省略号</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul,ol{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000000;
        }
        p{
            border: 1px solid #000000;
            margin: 40px auto;
            font-size: 30px;
            line-height: 50px;
        /*    1.设置盒子宽高*/
            width: 500px;
            height: 100px;
        /*    2.设置两行文字为盒子*/
            display: -webkit-box;
        /*    3.两个盒子垂直排列*/
            -webkit-box-orient: vertical;
        /*    4.设置两行文字*/
            -webkit-line-clamp: 2;
        /*    5.文字溢出显示省略号*/
            text-overflow: ellipsis;
        /*    6.溢出隐藏*/
            overflow: hidden;
        }



    </style>
</head>
<body>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>
</html>

十友九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行文字省略号

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多行文字省略号</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul,ol{ .
复制链接

扫一扫

专栏目录