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>
  • 相关阅读:
    对于ajax传递中文乱码问题,研究js encodeURI 与request.HtmlEncode的区别
    对于sa无法登陆,如何用windows身份验证来修改密码
    ASP.Net中自定义Http处理及应用之HttpHandler篇 1
    ReportViewer报表控件解析与使用(原)
    HttpUtility.UrlEncode,Server.UrlEncode 的区别
    xsl xml 以及 树的编写(原创)
    【转】存储过程的优缺点
    【转】关闭模态子窗口后刷新父窗口
    【转】ASP.NET 文件下载
    【转】去除HTML标签的方法
  • 原文地址:https://www.cnblogs.com/gaoht/p/13299302.html
Copyright © 2011-2022 走看看