css实现文本溢出显示省略号...

最新推荐文章于 2024-01-02 17:04:47 发布

weixin_33716557

最新推荐文章于 2024-01-02 17:04:47 发布

阅读量60

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3680343/blog/1591557

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.单行文本溢出

满足：设置宽度，强制不换行，超过的部分隐藏，text-overflow: ellipsis;

<head>
   <meta charset="utf-8">
	<title>文本溢出</title>
   <script src="./vendor/jquery-3.2.1.min.js"></script>
	<style type="text/css">
      body{
         width:500px;
         margin:0 auto;
         padding-top:50px;
      }
      div{
         white-space:nowrap; 
         width:100px;
         overflow: hidden;
         text-overflow: ellipsis;
      }
         
   </style>
</head>
<body>
   <div class="text-overflow-div">
      彼时年少，不知前路何谓艰苦，于是对未来充满热情，希望，而时间如白驹过隙，
转眼间已经步入了灵魂，也渐渐的适应了这样的生活。但是以前的梦想啊渐渐的偏离了我的轨道，
感慨岁月如刀，削平了我们的棱角。在茫茫人海中不卑不亢，小心翼翼的前行，再也不敢平淡挫折态度
   </div>
</body>

2.多行文本溢出

width:300px;
display: -webkit-box;
-webkit-box-orient: vertical;
//限制显示的行数
-webkit-line-clamp: 3;
overflow: hidden;

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

3.跨浏览器兼容的多行文本溢出

div{
    /*超出3行显示省略号...*/
    position: relative;
    top:0;
    left:0;
    width:300px;
    line-height:25px;
    height: 75px;
    overflow: hidden;
 }
div:after{
   content:"...";
   position:absolute;
   bottom:0;
   right:0;
}