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. PHP将数据库数据批量生成word文档

    <?php    class word{         function start(){            ob_start();            echo '<html x ...

  2. 黑马学习CSS之CSS模块化规范全部组成 CSS属性列表

  3. bootstrap表单控件

    禁用状态: 被禁用的 fieldset 为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件. <form> &l ...

  4. [BZOJ 4850][Jsoi2016]灯塔

    传送门 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) ...

  5. 109th LeetCode Weekly Contest Knight Dialer

    A chess knight can move as indicated in the chess diagram below:  .            This time, we place o ...

  6. BZOJ - 3224 可持久化Treap 树形操作

    这个题目去年就做过了,这次稍微改了一下 都是基础操作 #include<iostream> #include<algorithm> #include<cstdio> ...

  7. centos7安装nslookup工具、ntp工具

    2018-12-13 centos7安装nslookup工具 yum install bind-utils -y DNS解析localhost到本机 # .检测 [root@node2 ~]# nsl ...

  8. 剑指offer——面试题8:二叉树的下一个节点

    // 面试题8:二叉树的下一个结点 // 题目:给定一棵二叉树和其中的一个结点,如何找出中序遍历顺序的下一个结点? // 树中的结点除了有两个分别指向左右子结点的指针以外,还有一个指向父结点的指针. ...

  9. PIE SDK栅格数据唯一值渲染

    1. 功能简介 栅格数据唯一值渲染,是以像元为单位,不同的像元值设置不同的颜色,从而达到唯一值显示的效果. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 实例化唯一值渲染对象 第二步 初始 ...

  10. PIE SDK波谱运算

    1.算法功能简介 波谱运算(Spectral Math)是一种灵活的波谱处理工具,可以用数学表达式或IDL程序对波谱曲线(以及选择的多波段图像)进行处理.波谱曲线可以来自一幅多波段图像的Z剖面.波谱库 ...