<!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. mack pro常用快捷键

    fn + left / right / up / down 相当于 home/end/page up /page down delete 删除光标前一个字符 fn + delete 删除当前光标后一个 ...

  2. unity3d 公告板

    Unity 自带具有一个平面的原始对象,但一个简单的平面在2D游戏或GUI可能是有用的,在任何情况下作出一个好的开始例子.一个最小的平面包含四个顶点,界定两个三角形的边角. 第一件事就是设置顶点数组. ...

  3. [shell test] multiple conditions

      Classic technique (escape metacharacters): if[ \( $g -eq 1-a "$c"="123" \) -o ...

  4. bzoj 2151 种树 —— 思路+链表

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2151 先都放进堆里取最大的,但选了一个就不能选它两边的,所以可能不是最优,要有“反悔”的措施 ...

  5. ASP.NET Core：WebAppCoreAngular

    ylbtech-ASP.NET Core:WebAppCoreAngular 1.返回顶部 1. 2. 3. 4. 5. 6. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部   ...

  6. 【旧文章搬运】对抗RKU的StealthCode检测

    原文发表于百度空间,2009-07-02========================================================================== 快一个月没 ...

  7. 6-5 Haar特征2

    在遍历的过程中还需要考虑到一个步长的问题.这个模板一次滑动10个像素,那么总共就需要滑动9次.再加上最开始的第0次,合计在水平方向上和竖直方向上分别都有10个这样的模板,总共也就是100个模板.要计算 ...

  8. Event Handling Guide for iOS--(一)--About Events in iOS

    About Events in iOS Users manipulate their iOS devices in a number of ways, such as touching the scr ...

  9. k8s认证及ServiceAccount-十五

    一.ServiceAccount (1)简介 https://www.kubernetes.org.cn/service-account Service account是为了方便Pod里面的进程调用K ...

  10. Get back Typing Break in Ubuntu 12.04 & 11.10（转载）

    转自:http://ubuntuguide.net/get-back-typing-break-in-ubuntu-12-04-11-10 Since Ubuntu 11.10 Oneiric, th ...