码迷,mamicode.com
首页 > Web开发 > 详细

多行文本省略号的实现.html

时间:2017-06-28 20:16:15      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:情况   ibus   lips   odi   imp   模型   dict   port   单行   

多行文本省略号的实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .d1 {
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:6;
        -webkit-box-orient:vertical;


    }

    }
</style>
</head>
<body>
<div class="d1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus qui, sed laudantium? 
Hic facilis eius eveniet quisquam, voluptatibus molestias, soluta. Odit dicta et omnis
fugiat magnam commodi reiciendis consequatur quosLorem ipsum dolor sit amet, consectetur
adipisicing elit. Impedit quis dolore, assumenda veniam deserunt suscipit maxime, magni
doloremque excepturi praesentium ea ullam earum rem vel voluptatibus ex omnis odio ipsum. </div> </body> </html>

需要知道的几个属性:

  • text-overflow: ellipsis:用来实现单行文本的溢出显示省略号(...);在多行文本的情况下,用省略号(...)隐藏超出范围的文本
  • display: -webkit-box:将对象作为弹性伸缩盒子模型显示
  • -webkit-line-clamp:6:用来限制在一个块元素显示文本的行数
  • -webkit-box-orient:vertical:设置或检索伸缩盒对象的子元素排列方式

多行文本省略号的实现.html

标签:情况   ibus   lips   odi   imp   模型   dict   port   单行   

原文地址:http://www.cnblogs.com/lxmtx/p/7091270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!