<!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. LA-5052 (暴力)

    题意: 给[1,n]的两个排列,统计有多少个二元组(a,b)满足a是A的连续子序列,b是B的连续子序列,a,b中包含的数相同; 思路: 由于是连续的序列,且长度相同,可以枚举一个串的子串,找出这个子串 ...

  2. 【CQOI2009】中位数图

    [题目链接] 点击打开链接 [算法] 将小于m的数看作-1,大于m的看作1 然后求前缀和,如果区间[l,r]的中位数是m,显然有 : sum(r) - sum(l-1) = 0 因此,只需m的位置之前 ...

  3. rtmplib rtmp协议过程分析

    转自:http://chenzhenianqing.cn/articles/1009.html 写的很好,收藏如下,向作者致敬! 没事碰到了librtmp库,这个库是ffmpeg的依赖库,用来接收,发 ...

  4. ASP.NET Core：WebAppCoreApi

    ylbtech-ASP.NET Core:WebAppCoreApi 1.返回顶部 1. 2. 3.           4. 2. Controllers返回顶部 1.ValuesControlle ...

  5. socket入门教程

    Server.cs   服务端程序 using System; using System.Collections.Generic; using System.ComponentModel; using ...

  6. 任务24：WebHost的配置

    24 任务24:WebHost的配置 创建HelloCore的项目 我们新建一个空的mvc项目 我们在这里调用COnfigureAppConfiguration方法更改默认的配置.为读取setting ...

  7. php大小写转换函数

    1.将字符串转换成小写   strtolower(): 该函数将传入的字符串参数所有的字符都转换成小写,并以小定形式放回这个字 符串.例: <?php $str = "I want T ...

  8. 2019年5月22日 AY 程序员调侃语录

    我是AY,杨洋,做wpf开发的,最近得了一种病,程序员患得患失综合征.同事说,我年纪在变大,技术跟不上.业余之间,我原创了写了一些语录,给大家中午休息,累疲惫的时候,开心放松下. 1.活着的每一天都无 ...

  9. Unity3D教程：换装方法

    http://www.manew.com/4136.html 游戏内的角色,能够像纸娃娃换装那样子让玩家可以为自己的角色改变外观,一直是相当受欢迎的功能:一般而言,我们建好的 3D 模型,如果要将其中 ...

  10. bzoj 2882: 工艺【SAM】

    看上去比较SA,但是在学SAM所以就用SAM来做-- 把串复制一遍接在后面,对这个新串求SAM(这里的儿子节点要用map转移),然后从根节点每次都向最小的转移走,这样走n次转移的串就是答案 #incl ...