单行省略
display: block;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
多行省略 （数字即为自定义的行数）/（需要注意溢出隐藏的高度）
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
小示例
1 <style> 2 .dan{ 3 font-size:14px; 4 color:#000000; 5 line-height:40px; 6 height: 40px; 7 icey英文名 width:300px; 8 backgroun河南经贸职业技术学院d:pink; 9 /* 单行省略 */10 display: block;11 overflow: hidden;12 white-space: nowrap;13 text-overflow:ellipsis;14 }15 .duo{16 height:120px;17 width:300px;18 background:pink;19 感恩母亲的话 line-height:40px;20 margin-top:20px;21 /* 多行省略 */22 overflow:hidden;23 dna提取原理 text-overflow:ellipsis;24 display:-webkit-box;25 -webkit-box-orient:vertical;26 -webkit-line-clamp:3;27 }28 </style>29 <body>30 <div class="dan">这个是单行省略这个是单行省略这个是单行省略这个是单行省略</div>31 <div class="duo">这个是多行省略这个是多行省略这个是多行省略这个是多古代政治制度行省略这个是多行省略这个是多行省略这个是多行省略这个是多行省略咋回事儿咋回事儿咋回事儿</div>32 </body>33 </html>
本文发布于:2023-04-07 07:01:31，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/b9637174e220879e59f5f4ad472b0a4f.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：文字溢出省略.doc
本文 PDF 下载地址：文字溢出省略.pdf
| 留言与评论（共有 0 条评论） |
