<!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. cf 620C Pearls in a Row（贪心）

    d.有一串数字,要把这些数字分成若干连续的段,每段必须至少包含2个相同的数字,怎么分才能分的段数最多? 比如 是1 2 1 3 1 2 1 那么 答案是 21 34 7 即最多分在2段,第一段是1~3 ...

  2. How to run Media SDK samples on Skylake【转载】

    In the last few days, we have seen lot of concern for using Intel® Media 2016 on 6th generation Inte ...

  3. 用HTTP操作和文件操作把网页下载到sd卡

    这里先把代码贴到这里做一个存档,写到SD卡的是一个txt文件,改成HTML格式之后会出现百度主页,但是中文是乱码,这一点先暂时不去研究了. 代码: package com.larry.gotcha; ...

  4. I.MX6 NXP git 仓库

    /************************************************************************* * I.MX6 NXP git 仓库 * 说明: ...

  5. hadoop2 Ubuntu 下安装部署

    搭建Hadoop环境( 我以hadoop 2.7.3 为例, 系统为 64bit Ubuntu14.04 ) hadoop 2.7.3 官网下载 , 选择自己要安装的版本.注意每个版本对应两个下载选项 ...

  6. 【华为2016上机试题C++】最高分是多少

    [编程题] 最高分是多少 时间限制:1秒 空间限制:65536K 老师想知道从某某同学当中,分数最高的是多少,现在请你编程模拟老师的询问.当然,老师有时候需要更新某位同学的成绩. 输入描述: 输入包括 ...

  7. 洛谷 - P1118 - 数字三角形 - next_permutation

    https://www.luogu.org/problemnew/show/P1118 next_permutation的第二个参数是最后一个元素的下一个元素,sort也是一样!有毒!这么低级的错误. ...

  8. 算法学习--Day3

    今天搞了一波算法的哈希,代码难道不大,记录在这里吧. 题目描述     “臭味相投”——这是我们描述朋友时喜欢用的词汇.两个人是朋友通常意味着他们存在着许多共同的兴趣.然而作为一个宅男,你发现自己与他 ...

  9. java 发送get,post请求

    package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...

  10. mui中一级联动

    <!doctype html><html> <head> <meta charset="utf-8"> <title>& ...