首页 前端知识 CSS-设置文本省略号

CSS-设置文本省略号

2024-05-14 22:05:03 前端知识 前端哥 565 100 我要收藏

一、单行省略

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

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

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

效果图展示:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8604.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!