zoukankan      html  css  js  c++  java
  • css多行省略号和单行省略号

     一 : css单行省略号

    单行溢出,超出部分显示...或者截取。前提必须有宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=å, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        div {
            width: 200px;
            padding: 10px;
            box-sizing: border-box;
            height: 100px;
            border: 1px salmon solid;
        }
    
        div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
    
    <body>
        <div>
            陌生人,我也为你祝福
            愿你有一个灿烂的前程
            愿你有情人终成眷属
            愿你在尘世获得幸福
            我只愿面朝大海,春暖花开
        </div>
    </body>
    
    </html>

     二 : css多行省略号

      

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=å, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        div {
            width: 200px;
            box-sizing: border-box;
            border: 1px salmon solid;
        }
    
        div {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
    
    <body>
        <div>
            陌生人,我也为你祝福
            愿你有一个灿烂的前程
            愿你有情人终成眷属
            愿你在尘世获得幸福
            我只愿面朝大海,春暖花开
        </div>
    </body>
    
    </html>

    适用范围:

    因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
    注:
    1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
    2.display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    3.-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式;

     三: 浏览器兼容的方案

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=å, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        div {
            position: relative;
            line-height: 1.4em;
            /* 3 times the line-height to show 3 lines */
            width: 252px;
            height: 4.2em;
            overflow: hidden;
        }
    
        div::after {
            content: "...";
            font-weight: bold;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
    
    <body>
        <div>
            陌生人,我也为你祝福
            愿你有一个灿烂的前程
            愿你有情人终成眷属
            愿你在尘世获得幸福
            我只愿面朝大海,春暖花开
        </div>
    </body>
    
    </html>
  • 相关阅读:
    flask路由+视图
    flask基本使用1
    返回对象时字典化
    python3连接redis
    selected_related和prefetch_related
    django删除migrations导致初始化数据库失效
    vue添加拦截器(身份认证)以及cookie认证
    vue添加使用全局变量
    列表:动手试一试
    转来的字符串编辑方式
  • 原文地址:https://www.cnblogs.com/gaoht/p/13299302.html
Copyright © 2011-2022 走看看