CSS-设置省略号-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS-设置省略号。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、单行文本

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

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

先设置宽固定的宽度：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>

效果图：

css省略号,html,css,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>