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. c语言数据结构学习心得——数据结构基本概念

    1.数据>数据元素>数据项      数据的基本单位是数据元素,数据元素的基本单位是数据项 2.运算的定义->针对逻辑结构 集合:同属于一个集合,无其他关系.(数学上的集合) 线性结 ...

  2. 《条目十六》如何将vector和string的数据传给遗留的API

    <条目十六>如何将vector和string的数据传给遗留的API 优秀的代码是可以延续的,所以并非所有的代码都是重构的,而且有时候重构会对整个系统影响较大,投入巨大,得不偿失.然而,也不 ...

  3. 性能检测参考SQL语句

    /****** Object: StoredProcedure [dbo].[SP_CPU] Script Date: 12/09/2018 19:01:24 ******/ SET ANSI_NUL ...

  4. js innerText、textContent、innerHTML的区别和各自用法

    //自定义函数 function my$(id) { return document.getElementById(id); } //点击按钮设置div中的文本内容 my$("btn&quo ...

  5. ThinkPHP5.0中Request请求对象的使用和常用的操作

    request的使用 第一种方法 在控制器头部添加request引用 然后在方法里调用 ‘instance’类 然后在调用方法: public function index($name='name') ...

  6. 20165224 陆艺杰 Exp4 恶意代码分析

    Exp4 恶意代码分析 1实验后回答问题 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 计划任务每段 ...

  7. Android 利用apache tomcat在自己的电脑上搭建服务器

    1.什么叫服务器 装了服务器端的软件的那台电脑被称为服务器.常见的服务器的软件有apache tomcat. 2.Tomcat 介绍 tomcat是一种轻量级的web容器服务器,使用tomcat可以实 ...

  8. RabbitMQ 在Linux环境中的默认位置

    参考:https://www.rabbitmq.com/relocate.html

  9. LOJ6519. 魔力环(莫比乌斯反演+生成函数)

    题目链接 https://loj.ac/problem/6519 题解 这里给出的解法基于莫比乌斯反演.可以用群论计数的相关方法代替莫比乌斯反演,但两种方法的核心部分是一样的. 环计数的常见套路就是将 ...

  10. 二分查找-数组实现(小trick)

    template<typename T> int binarySearch(T arr[], int n, T target){ , r = n-; //在[l...r]范围内寻找targ ...