控制只显示2行,并以省略号结束

    text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

效果显示

    不过值得注意的是,双行超出显示的话,根据line-height行高显示的话
要同时设置高和行高的话,要注意:如height:48px;line-height:24px;
或:直接:line-height:24px;

同理,3行4行都是不在话下

对于平时只显示一行的,代码要更加简单一些

    overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

效果显示

在微信小程序中,对view与text均有效。

css超出内容以省略号显示的更多相关文章

  1. 【转】如何用css限制文字长度,使溢出的内容用省略号…显示

    文章转自这里(现在貌似被黑了,建议不要点击了) ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐 由于文字内容长度的不 ...

  2. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  3. css 超出部分以省略号的形式显示

    想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度,然后添加以下属性 overflow: hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/*超出 ...

  4. css 实现div内显示两行或三行,超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  5. 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  6. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  7. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  8. text-overflow:ellipsis实现超出隐藏时省略号显示

    text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-s ...

  9. Div里超出部分,省略号显示

    1.一行显示并出现省略号 1)三个属性: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidde ...

随机推荐

  1. Python中的单例模式的几种实现方式的优缺点及优化

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  2. 简单MVC理解与实现

    MVC基本概念 MVC大家不陌生,包含模型(Model).视图(View).控制器(Controller),其中模型用于基本业务逻辑的实现,视图用于响应结果的表示,控制器用于模型控制和请求分派.先放上 ...

  3. 【python3之变量,输入输出,判断,循环】

    一.python的基础语法和规则 1.变量 ①.变量的命名规则 语法: (下划线或字母)+(任意数目的字母.数字或下划线) 变量名必须以下划线或字母开头,而后面接任意数目的字母.数字或下划线.下划线分 ...

  4. Win10 MySQL-python

    在Windows 下调试 Python 还是挺麻烦的.通过PyCharm 来安装个MySQL-python 的库都搞了大半天.分别尝试 1.2.3,1.2.4和1.2.5都有不同的错误.需要解决的问题 ...

  5. 10个优秀个android项目,精选|快速开发

    1.Android-FilePicker-android图片和文档选择器 项目地址 https://github.com/DroidNinja/Android-FilePicker 2.ViewPag ...

  6. Java学习笔记7(简易的超市库存管理系统示例)

    用以前学过的知识,可以简单地做一个超市库存管理系统: 定义一个商品类: public class FruitItem { int ID; String name; double price; int ...

  7. cassandra的gc调优

    我们用的是cassandra3.7官方的docker镜像,在生产环境发现有一个小时一次停顿的现象.我猜测是java gc的原因,于是看了cassandra的gc日志,果然发现有每小时长达300ms-2 ...

  8. 关于CSS的table-layout属性的用法详解

    前言: 今天来和大家详细说一下table-layout属性的用法. /*eg:设置表格布局算法*/ table{ table-layout:fixed; } ***本文关键词:table-layout ...

  9. Android Studio | 详细安装教程

    Windows和Mac系统下的安装教程差不多,需要注意的是确保系统中已经安装了JDK,并且JDK版本为1.7或1.7以上版本,如果没有,请自行更新下载安装,地址如下: Java SE Develop ...

  10. Effective Java 第三版——21. 为后代设计接口

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...