<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>显示多行文字,多余的用省略号代替</title> <meta name="author" content="suixinMLF" /> <style> .centent{ width:300px; height:200px; padding:10px; font-size:14px; line-height:25px; border:1px solid #ebebeb; display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center;/*在主轴上对其的方向*/ justify-content:center; -webkit-align-items:center;/*在交叉轴上的对其方式*/ } .centent div{ height:75px; overflow:hidden;/*须给一个高,以便不支持时不显示超出内容*/ display:-webkit-box; -webkit-line-clamp:3;/*显示3行,超出的用省略号代替*/ -webkit-box-orient:vertical; } </style> </head> <body> <div class="centent"> <div>
让子元素垂直居中,并且只显示三行文字,超出部分用省略号代替。
让子元素垂直居中,并且只显示三行文字,超出部分用省略号代替。
让子元素垂直居中,并且只显示三行文字,超出部分用省略号代替。
</div></div></body></html>让子元素垂直居中,并且只显示三行文字,超出部分用省略号代替。
css控制文字行数,超出部分用省略号代替
最新推荐文章于 2024-07-24 10:23:02 发布