单行文本超出省略号
-
示例代码
<style> .text { width: 200px; /* 省略号方式隐藏 */ text-overflow: ellipsis; overflow: hidden; /* 文本强制一行显示 */ white-space: nowrap; } </style> <body> <div class="text">庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层</div> </body> -
效果展示
多行文本超出省略号
css 实现
-
示例代码
<style> .text { width: 200px; /* 第一个条件：非标准的 CSS 属性，主要用于在 WebKit 浏览器（如Chrome和Safari）中 */ display: -webkit-box; /* 第二个条件：垂直排列 */ -webkit-box-orient: vertical; /* 第三个条件：限制行数 */ -webkit-line-clamp: 2; /* 第四个条件：溢出隐藏 */ overflow: hidden; } </style> <body> <div class="text">庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层</div> </body> -
效果展示
使用定位伪元素遮盖末尾文字
-
示例代码
<style> div { width: 200px; /*限制元素宽度*/ height: 60px; /* 高度为需要显示的行数*行高，比如这里显示两行，就是 30 * 2，则为 60px */ line-height: 30px; position: relative; /*文本超出隐藏*/ overflow: hidden; } div:after { content: "..."; position: absolute; bottom: 0; right: 0; padding: 0 5px; background-color: #fff; } </style> <body> <div class="text">庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层</div> </body> -
效果展示
庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层
打赏作者
您的打赏是我前进的动力
微信
支付宝
css🌰 常见重要知识
上一篇
评论
