CSS-设置省略号

最新推荐文章于 2024-04-25 14:40:50 发布

越努力越好

最新推荐文章于 2024-04-25 14:40:50 发布

阅读量1.5w

点赞数 4

分类专栏： html 文章标签： css html 前端

本文链接：https://blog.csdn.net/ydc222/article/details/127676862

版权

html 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

一、单行文本

写前端页面的时候很多情况下需要省略号，单行文本溢出省略号

设置单行文本省略号的写法：

先设置宽固定的宽度：width: 300px; 必须要的

设置不换行：white-space:nowrap;

设置省略号：text-overflow: ellipsis;

裁剪多余的内容/溢出的内容：overflow: hidden;

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        <p>低诗才尘范我陀五牙予主始的貂两在褒自，大太出惜洪自冈修判拆者判，保攻斯答笔千欲君沉仅张融六，其卧说次他疾他上第范秦，因可圣，逃杨只二又花冈王中国九极人，逝天不同用我他览真量，到罪制历会褒洪衣，属你沫讨游帝光吴，到六六国几二赏了使他有孔韩的了，慨天而，最战。
        </p>
    </div>
</body>

</html>

效果图：

二、多行文本

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            /* 主要控制父元素容器里面子元素的排列方式 */
            display: -webkit-box;
            display: -moz-box;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
           /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
            -webkit-line-clamp: 3;
            /*显示行数  要几行就改几行*/

        }
    </style>
</head>

<body>
    <div>
        <p>低诗才尘范我陀五牙予主始的貂两在褒自，大太出惜洪自冈修判拆者判，保攻斯答笔千欲君沉仅张融六，其卧说次他疾他上第范秦，因可圣，逃杨只二又花冈王中国九极人，逝天不同用我他览真量，到罪制历会褒洪衣，属你沫讨游帝光吴，到六六国几二赏了使他有孔韩的了，慨天而，最战。
        </p>
    </div>
</body>

</html>