CSS-设置文本省略号

梦无所求

已于 2023-10-11 18:44:24 修改

阅读量9.5k

点赞数 3

文章标签： css 前端

于 2023-06-08 15:32:07 首次发布

本文链接：https://blog.csdn.net/qq_56726194/article/details/131107933

版权

一、单行省略

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

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

设置宽固定的宽度：width: 400px;

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

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

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            width: 400px;
            white-space: nowrap;//不支持换行
            overflow: hidden;//隐藏多出部分文字
            text-overflow: ellipsis;//用省略号代替多出部分文字
        }
    </style>
</head>
 
<body>
    <div>
        <p>《客至》（杜甫）舍南舍北皆春水，但见群鸥日日来。花径不曾缘客扫，蓬门今始为君开。盘飧市远无兼味，樽酒家贫只旧醅。肯与邻翁相对饮，隔篱呼取尽馀杯。</p>
    </div>
</body>
 
</html>

效果图展示：

二、多行省略

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

设置宽固定的宽度：width: 400px;

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

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

(度娘解释)规定元素生成的框的类型display: -webkit-box;(//将对象作为弹性伸缩盒子模型显示)

设置伸缩盒子的子元素排列方式：-webkit-box-orient: vertical;(垂直排列子元素）

设置显示行数：-webkit-line-clamp:2;//这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            width: 400px;
            overflow: hidden;/*隐藏多出部分文字*/
            text-overflow: ellipsis;/*用省略号代替多出部分文字*/
            display: -webkit-box;/* 显示多行文本容器 */
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;/*显示行数*/
        }
    </style>
</head>
 
<body>
    <div>
        <p>《蝶恋花·阅尽天涯离别苦》（王国维）阅尽天涯离别苦， 不道归来，零落花如许。花底相看无一语， 绿窗春与天俱暮。
待把相思灯下诉，一缕新欢，旧恨千千缕。最是人间留不住， 朱颜辞镜花辞树。</p>
    </div>
</body>
 
</html>

效果图展示：

梦无所求

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS-设置文本省略号

写前端页面的时候很多情况下需要省略号，单行省略号设置单行文本省略号的写法：设置宽固定的宽度：width: 100px;设置不换行：white-space:nowrap;设置省略号：text-overflow: ellipsis;
复制链接

扫一扫