zoukankan      html  css  js  c++  java
  • 多行文本省略号的实现.html

    多行文本省略号的实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .d1 {
             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:设置或检索伸缩盒对象的子元素排列方式
  • 相关阅读:
    php 可变函数用法
    javascript语法里一些难点问题
    jquery技巧总结
    Bootstrap学习笔记
    Linux下中文文件名乱码问题的详解
    php中iconv函数使用方法,解决中文乱码
    web制作、开发人员需知的Web缓存知识
    鲍鱼开始讲八皇后了
    鲍鱼开始讲八皇后了
    double links....baoyuzuoye
  • 原文地址:https://www.cnblogs.com/lxmtx/p/7091270.html
Copyright © 2011-2022 走看看