<!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. 【转载】AsyncTask用法

    在开发Android应用时必须遵守单线程模型的原则: Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行.在单线程模型中始终要记住两条法则: 1. 不要阻塞UI线程 2. 确保只 ...

  2. POJ1474：Video Surveillance（求多边形的核）（占位）

    A friend of yours has taken the job of security officer at the Star-Buy Company, a famous depart- me ...

  3. codeforces round 421 div2 补题 CF 820 A-E

    A Mister B and Book Reading  O(n)暴力即可 #include<bits/stdc++.h> using namespace std; typedef lon ...

  4. 51Nod 1327 棋盘游戏 —— 延迟DP

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1327 看博客:https://www.cnblogs.com/Na ...

  5. apple-touch-startup-image 制作iphone web应用程序的启动画面

    为ipad制作web应用程序的启动画面时发现个问题,只能显示竖屏图,横屏图出不来,如下: 首先页面头部里要加入(这个是APP启动画面图片,如果不设置,启动画面就是白屏,图片像素就是手机全屏的像素) & ...

  6. nodejs supvisor模块

    在测试nodejs程序的时候,每次都需要在控制台编译,非常的麻烦.supervisor是一款无需重复手动编译,自动后台监听文件变化来自动编译,并且不需要在项目内require,使用非常的方便. 使用方 ...

  7. (链接)Tomcat设置Session的失效方式

    tomcat 设置session过期时间(四种方式):https://blog.csdn.net/liuxiao723846/article/details/50055075 tomcat里设置ses ...

  8. Codeforces702C【二分】

    题意: 给你几个城市,蜂窝塔量: 给出城市和塔的坐标可以重叠,非递减的方式给出: 输出最小的r,以至于所有的城市能被覆盖到: 思路: 目的就是要使每个城市覆盖到,那我对每个城市找离最近塔的距离,然后在 ...

  9. POJ2367【拓扑排序】

    很裸的拓扑排序~ //#include <bits/stdc++.h> #include<iostream> #include<string.h> #include ...

  10. vector理解一波~~~

    Vector: 头文件: #include<vector> using namespacestd; 定义: vector<类型>q;//类同于  "类型 q[];&q ...