1、只显示一行，超出部分用省略号

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

2、只显示两行(或多行)，超出部分用省略号

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    // 控制行数

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

CSS文本超过两行用省略号代替的更多相关文章

  1. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  2. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  3. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  4. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  5. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  6. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  7. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  8. CSS文本溢出，显示省略号（...）

    方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...

  9. css 文本超出范围显示省略号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. php获取数据转换成json格式

    <?php header("content-type:text/html;charset=utf-8"); $con=mysql_connect("localhos ...

  2. json字符串和对象的相互转换

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式. 同时,JSON是 JavaScript 原生格式,这 ...

  3. mac 将本地文件上传到vps

    打开mac终端 假设通过ssh连接远程vps命令为. ssh root@194.10.10.23 -p92322 (说明:92322表示端口号,一般vps端口号默认是22) 那么复制本地文件到终端的命 ...

  4. 怎么比较两个list中相同的值个数！

    怎么比较两个list中相同的值个数!int count=0;for(int i=0;i<list1.size();i++){ for(int j=0;j<list2.size();j++) ...

  5. java 7,8 排序异常

    排序报 java.lang.IllegalArgumentException: Comparison method violates its general contract! 要明确返回-1, 0, ...

  6. Spring这棵大树

    目前项目中用的框架大多数都是Spring,一直想找时间对这个框架做一个全面的了解. 今天先以导图的形式画出来Spring都包含的主要模块,即使有些模块目前用不上,但说不定在将来的应用场景时想到Spri ...

  7. Java 基本数据类型 相互转换

    int -> String String s=String.valueOf(12345); String -> int int i=Integer.parseInt("123&q ...

  8. day18 13.乐观锁介绍

    乐观锁是使用版本字段,悲观锁是使用数据库底层的锁机制.mysql的类型timestamp(时间戳)有一个特点:插入数据不用管我,我取系统当前默认值.timestamp插入时间会记录,修改时间也会记录. ...

  9. 【CODEVS】2618 核电站问题

    2618 核电站问题 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 一个核电站有N个放核物质的坑,坑排列在一条直 ...

  10. 【模板】倍增LCA [2017年5月计划 清北学堂51精英班 Day3]

    P3379 [模板]最近公共祖先(LCA) 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询 ...