p:first-child {
  background-color: pink;
  width: 150px;
  line-height: 28px;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p:last-child {
  background-color: pink;
  width: 150px;
  line-height: 28px;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
   //这里其实是让第三行末尾显示为省略号罢了,如果去掉overflow: hidden;
}

css控制文本单行或者多行溢出显示为省略号...的更多相关文章

  1. CSS控制文本的长度,超过一行显示省略号

    代码如下: <div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overfl ...

  2. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  4. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  5. 复习-css控制文本字体属性

    css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...

  6. 问题:css 自动换行;结果:CSS控制文本自动换行

    CSS控制文本自动换行 CSS控制文本自动换行,阅读CSS控制文本自动换行,1.你定死表格的宽度,即给表格一个宽度值(是 数值,不是百分比) 2.强制不换行div{//white-space:不换行; ...

  7. css解决多行溢出显示省略号

    多行溢出 仅作为记录方便查找 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: number; /*n行溢 ...

  8. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  9. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

随机推荐

  1. org.apache.storm.utils.NimbusLeaderNotFoundException: could not find leader nimbus from seed hosts["datanode9"]. Did you specify a valid of nimbus hosts for config nimbus.seeds?

    出现这个异常的原因主要是zookeeper没有正常工作引起的.可以在storm-conf-storm.yaml中设置 storm.zookeeper.servers: -"zookeeper ...

  2. c#优秀文章

    文件传输示例]C# WinForm WebSocket (非浏览器):http://bbs.cskin.net/thread-4431-1-1.html NanUI for Winform发布,让Wi ...

  3. OEL6.8安装虚拟带库模拟器

    最近在虚拟机下搭建了一个OSB备份环境,其中使用到了虚拟带库,以下是虚拟带库的配置过程,简要记录之. 1.下载虚拟带库的源码(mhvtl-2016-03-10.tgz). 2.解压缩源码. # cd ...

  4. Android 简单适配器(SimpleAdapter)

    1.介绍 2.简单适配器的实现方法 3.XML文件 (1)主页面布局 <?xml version="1.0" encoding="utf-8"?> ...

  5. C++_标准模板库STL概念介绍1-建立感性认知

    标准模板库的英文缩写是STL,即Standard Template Library. STL里面有什么呢? 它提供了一组表示容器.迭代器.函数对象和算法的模板. 容器是一个与数组类似的单元,可以存储若 ...

  6. LeetCode153.寻找旋转排序数组中的最小值

    153.寻找旋转排序数组中的最小值 描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 请找出 ...

  7. 洛谷 P1155 【NOIP2008】双栈排序

    题目链接 题解 这题有点神啊.. 我们仔细观察一下,发现两个栈内元素必须为降序 那么有结论 如果有\(i < j < k\) 且 \(a[k] < a[i] < a[j]\)则 ...

  8. 洛谷 P1453 城市环路 ( 基环树树形dp )

    题目链接 题目背景 一座城市,往往会被人们划分为几个区域,例如住宅区.商业区.工业区等等.B市就被分为了以下的两个区域--城市中心和城市郊区.在着这两个区域的中间是一条围绕B市的环路,环路之内便是B市 ...

  9. 215 Kth Largest Element in an Array 快排

    题目:在无序的数组中找到第k大的元素,也就是若长度为n的数组从小到大排列时,下标为n-k的元素. 注意Example2:第4大的元素是4,也就是数组中出现的两个5分别是第2大和第3大的数字. 解法一: ...

  10. bzoj1934 Vote 善意的投票 最小割(最大匹配)

    题目传送门 题目大意:很多小朋友,每个小朋友都有自己的立场,赞成或者反对,如果投了和自己立场不同的票会得到一个能量.又有很多朋友关系,如果一个人和他的一个朋友投的票不同,也会得到一个能量,现在问,通过 ...