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. 三种timer控件的简单实例

    .system.windows.forms .system.threading.timer .system.timers.timer using System; using System.Collec ...

  2. layer mobile开发layer.full

    Layer For Mobile 之 layer.full() 背景介绍:layer mobile是专门针对手机页面开发的一套框架,具体介绍请看官方文档 http://layer.layui.com/ ...

  3. Visual Studio 2019 秘钥

    Visual Studio 2019 EnterpriseBF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 ProfessionalNYWVH-HT4X ...

  4. Idea 软件Project项目的jar依赖关系设置方法

    1.查看所依赖的jar文件 (1)File--->Project Structure (2)Modules--->project01---->dependencies,可见所缺少的j ...

  5. 记一个SpringBoot中属性注入失败的问题Consider defining a bean of type ''' in your configuration

    今天遇到的一个问题: 代码检查了好几次,都没有错误,但是启动时就会报错Consider defining a bean of type ''' in your configuration. 启动类在c ...

  6. Cannot reinitialise DataTable 问题

    加个 destroy:true,   //Cannot reinitialise DataTable,解决重新加载表格内容问题

  7. [转] Node.js的线程和进程

    [From] http://www.admin10000.com/document/4196.html 前言 很多Node.js初学者都会有这样的疑惑,Node.js到底是单线程的还是多线程的?通过本 ...

  8. 关于在scrapy中使用xpath

    1. 还是以虎嗅为例,他给我返回的是一个json格式的json串 2.那么我需要操作的就是把json串转换成我们的字典格式再进行操作 str=json.loads(response.body)['da ...

  9. linux中终端字体样式显示不正常

    问题:Centos终端中,字体显示不正常,中间感觉有空格,空格和单词傻傻分不清. 解决办法: yum groupinstall "Chinese Support" yum grou ...

  10. linux中安装软件,查看、卸载已安装软件方法

    各种主流Linux发行版都采用了某种形式的包管理系统(PMS)来控制软件和库的安装. 软件包存储在服务器上,可以利用本地Linux系统上的PMS工具通过互联网访问.这些服务器称为仓库. 由于Linux ...