如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现单行文本省略

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                margin:0 auto ;

                width:300px;

                color: red;

                overflow: hidden;

                text-overflow: ellipsis;

                white-space: nowrap;

            }

        </style>

    </head>

    <body>

        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>

    </body>

</html>

结果

实现多行文本省略

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                margin: 0 auto;

                width: 300px;

                color: red;

                display: -webkit-box;

                -webkit-box-orient: vertical;

                -webkit-line-clamp:;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>

    </body>

</html>

结果

注意：CSS3属性记得添加前缀，如

 -webkit-box-orient

css多行文本省略号（...）的更多相关文章

  1. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

  2. css多行文本省略号

    适用于内核为webkit的浏览器: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflo ...

  3. CSS 设置多行文本省略号 ...

    CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...

  4. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. [CSS备忘]多行文本省略号

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...

  6. 多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  7. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  8. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  9. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

随机推荐

  1. POJ 2239

    #include<iostream> #include<algorithm> #define MAXN 305 using namespace std; int _m[MAXN ...

  2. WCF系列教程之WCF客户端调用服务

    1.创建WCF客户端应用程序需要执行下列步骤 (1).获取服务终结点的服务协定.绑定以及地址信息 (2).使用该信息创建WCF客户端 (3).调用操作 (4).关闭WCF客户端对象 二.操作实例 1. ...

  3. MySQL 重命名数据库

    首先创建目标库 create database trgdb; 获取所有源库的表名 use information_schema; select table_name from TABLES where ...

  4. Spring Boot遇到的某些问题

    Spring Boot遇到的某些问题 1.关于templates的html包格式问题: <properties> <project.build.sourceEncoding>U ...

  5. Android进程管理

    1.进程按照优先级分为不同的等级FVSBE Foreground process前台进程:用户可看到进程里某个activity界面(可以获得焦点的) Visible process可见进程:用户仍可见 ...

  6. Java网络编程（二）关于Socket的一些个人想法

    1.Socket之间是如何通信的? 1.1 通信是要两两之间进行的所以应该有至少一个客户端(Client)和一个服务器端(Server),一般来说都是多个c端对一个s端---c\s 1.2 在客户端: ...

  7. Java类文件结构及javac的ClassReader类解读

    首先来看一下ClassFile,类注释如下: A JVM class file. Generic Java classfiles have one additional attribute for c ...

  8. 033-JsonUtils 工具类模板

    模板一:使用的是jackson package cn.e3mall.common.utils; import java.util.List; import com.fasterxml.jackson. ...

  9. 解决Linux下pcieport 0000:00:1c.5问题导致的系统根目录/磁盘空间不足

    最近刚换了笔记本,拿到本后在win10基础装上Ubuntu 16.04双系统,有个问题是每次关机都会报一堆pcie问题,并且经常没声音,声音问题通过上一篇文章暂时解决,然后就没在意了,可是几天后出现系 ...

  10. [作业] Python入门基础--猜年龄

    age = 20 while True: try: guess_age = int(input('guess age:')) if guess_age > age: print('Is bigg ...