6.文本溢出省略号

最新推荐文章于 2022-08-19 11:22:08 发布

吃不到的花生仁

最新推荐文章于 2022-08-19 11:22:08 发布

阅读量99

点赞数

分类专栏： css

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

单行

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
           p{
               white-space: nowrap; /**一行显示不允许换行**/
               overflow: hidden;/**隐藏超出宽度内容*/
               text-overflow:ellipsis;/***使用省略号代表未显示内容*/
           }

多行

a.第一种

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
           p{
               display: -webkit-box; /**弹性伸缩盒子显示*/
               -webkit-box-orient:vertical;/**设置弹性伸缩盒子内对象的排列方式**/
               -webkit-line-clamp:2;/***限制块元素内文本显示的行数*/
               overflow: hidden;/**隐藏超出宽度内容*/
               text-overflow:ellipsis;/***使用省略号代表未显示内容*/
           }

   </style>
</head>
<body>
   <p>单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单单行单行
       单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行
       单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行
       行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行
   单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单单行单行
       单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行
       单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行
       行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行单行</p>
</body>
</html>

b.第二种

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
           p{
               height: 30px;
               line-height: 2em;
               overflow: hidden;
               border: 1px solid red;
               position: relative;
           }
           p::after{
               content: "...";
               position: absolute;
               right: 0;
               bottom: 0;
               padding: 0px 12px 0px 12px;
               background: #fff;
           }

吃不到的花生仁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
6.文本溢出省略号

单行<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> p{ white-space: now...
复制链接

扫一扫