<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p {

                width: 100px;

                height: 40px;

                line-height: 40px;

                text-align: center;

                margin: 0 auto;

                background: #ccc;

                overflow: hidden;

                text-overflow: ellipsis;

                white-space: nowrap;

            }

            div {

                display: block;

                display: -webkit-box;

                max-width: 300px;

                height: 109.2px;

                margin: 10px auto;

                font-size: 26px;

                line-height: 1.4;

                -webkit-line-clamp: 3;

                -webkit-box-orient: vertical;

                overflow: hidden;

                text-overflow: ellipsis;

            }

        </style>

    </head>

    <body>

        <p>文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</p>

        <div>文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</div>

    </body>

</html>

CSS3实现单行、多行文本溢出（省略号的形式出现）的更多相关文章

  1. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  2. 移动端小总结(1)---meta、input和单行多行文字溢出省略号

    一.常用META 1. 添加到主屏后的标题(IOS) 1 <meta name="apple-mobile-web-app-title" content="标题&q ...

  3. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  4. css实现单行，多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  5. CSS、j's单行、多行文本溢出显示省略号

    在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...

  6. CSS实现单行、多行文本溢出显示省略号（…）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  7. CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  8. CSS单行、多行文本溢出显示省略号（……）

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  9. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

  10. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

随机推荐

  1. classname.this 和 this的使用场景

    今天在写代码时,发现在写了一个内部类,而在内部类中需要调用外部类的实例方法,直接使用this调用发现调用的不是外部类而是内部类,于是查找资料原来需要使用外部类的classname.this这样的调用, ...

  2. 【扬中集训DAY1T1】 微信群

    [题目链接] 点击打开链接 [算法] 对问题稍加分析后,发现其实要求的就是 : C(N,K) + C(N,K+1) + C(N,K+2) + ... + C(N,N) 因为N最大10^9,K最大10^ ...

  3. P2946 [USACO09MAR]牛飞盘队Cow Frisbee Team

    题目描述 After Farmer Don took up Frisbee, Farmer John wanted to join in the fun. He wants to form a Fri ...

  4. 使用webpack报错

    意思是: 意思是CLI被移动到了一个专门的包 webpack-cli里了.请安装webpack-cli 的除了webpack本身使用cli当用npm时,使用npm install webpack-cl ...

  5. usb2.0与usb3.0的区分

    USB 2.0 USB2.0技术规范是有由Compaq.Hewlett Packard.Intel.Lucent.Microsoft.NEC.Philips共同制定.发布的,规范把外设数据传输速度提高 ...

  6. windows动态磁盘导致的分区问题

    上次说到由于装双系统导致我的win7启动不了了,一直以为是不是在ubuntu的安装界面点错了什么东西导致的,甚至认为是不是server的安装程序有点bug,直到今天继续折腾才发现了问题所在,跟ubun ...

  7. 哈希加密和MD5加密函数

    import hashlib #----------------------------MD5算法 # def Md5(n): # m = hashlib.md5() # m=hashlib.sha2 ...

  8. [技术分享]借用UAC完成的提权思路分享

    借用UAC完成的提权思路分享 背景 UAC(User Account Control,用户帐户控制)是微软为提高系统安全而在Windows Vista中引入的新技术,它要求用户在执行可能会影响计算机运 ...

  9. grep在指定类型的文件中查找字符 （转载）

    转自:http://blog.csdn.net/qvbfndcwy/article/details/8127329 find -name '*.php'|xargs grep 'include'//在 ...

  10. 洛谷 - P2045 - 方格取数加强版 - 费用流

    原来这种题的解法是费用流. 从一个方格的左上走到右下,最多走k次,每个数最多拿走一次. 每次走动的流量设为1,起始点拆点成限制流量k. 每个点拆成两条路,一条路限制流量1,费用为价值相反数.另一条路无 ...