<!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. spark运行方式及其常用参数

    yarn cluster模式 例行任务一般会采用这种方式运行 指定固定的executor数 作业常用的参数都在其中指定了,后面的运行脚本会省略 spark-submit \ --master yarn ...

  2. limit的用法

    limit子句可以用于强制select语句返回指定的记录数.limit接受一个或两个数字参数,参数必须是整数常量.如果给定两个参数,第一个参数指定第一个返回记录行的偏移量,第二个参数指定返回记录行的最 ...

  3. javascript switch..... case

    switch(条件表达式) { case 常量: { 语句a; } break; case 常量: { 语句b; } break; case 常量: { 语句c; } break; ... case ...

  4. bzoj1304

    树形dp 题目是要求最深的颜色 先开始觉得设dp[i][0/1/2]表示这个点的状态,然后发现没办法保证该点是最深的点,且dp状态没有实际意义,其实dp[i][0/1]表示当前i的子树颜色为c^1的叶 ...

  5. 【旧文章搬运】改PEB中的映像路径可以这样～

    原文发表于百度空间,2008-7-26========================================================================== 用常用的几个 ...

  6. zabbix 监控mysql状态 -Windows

    由于公司爬虫mysql数据库在Windows下面,监控一下: 主要命令:mysqladmin -uroot -proot -h127.0.0.1 ping 2>D:\zabbix\waring. ...

  7. Spring Boot 学习系列（序）—Spring Boot

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Spring Boot? Spring Boot 是由pivotal团队提供的一个基于Spring的全新框架 ...

  8. python help(int)

    class int(object) | int(x=0) -> integer | int(x, base=10) -> integer | | Convert a number or s ...

  9. IT兄弟连 JavaWeb教程 经典案例3

    案例需求:写一个用户登录的html页面有账号和密码,并在登录的Servlet中获取登录的账号和密码,如果账号是abc密码是123则重定向到main.html,否则重定向到login.html. 案例实 ...

  10. NOIp2002神经网络 【拓扑排序】By cellur925

    题目传送门 这道题目没有什么难的,是一道拓扑排序+递推的题目.我的思路是开始处理出拓扑序,然后因为数据范围很小怎么搞都可以,就邻接矩阵存图+暴力枚举.结果60分. 后来看题解发现,大家都是边拓扑边进行 ...