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

时间：2023-03-08 16:04:38
多行文本省略号的实现.html

多行文本省略号的实现

<!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：设置或检索伸缩盒对象的子元素排列方式

相关文章