1、只显示一行，超出部分用省略号

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

2、只显示两行(或多行)，超出部分用省略号

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    // 控制行数

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

CSS文本超过两行用省略号代替的更多相关文章

  1. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  2. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  3. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  4. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  5. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  6. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  7. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  8. CSS文本溢出，显示省略号（...）

    方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...

  9. css 文本超出范围显示省略号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. pc端样式重置以及常用样式规范class

    //reset html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a ...

  2. 用VUE监听数组和对象的变化

    看一下演示代码,先是增加数组和对象. <template> <div> <p>这是我定义的数组</p> <div>{{this.arr}}& ...

  3. 数据库迁移工具DBMigration

  4. mysql 分表-横向，纵向

    mysql 分库分表 分表是分散数据库压力的好方法. 分表,最直白的意思,就是将一个表结构分为多个表,然后,可以再同一个库里,也可以放到不同的库. 当然,首先要知道什么情况下,才需要分表.个人觉得单表 ...

  5. Vue.js NPM 安装方法

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...

  6. webpack学习之—— Configuration(配置)

    你可能已经注意到,很少有 webpack 配置看起来很完全相同.这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件.此对象,由 webpack 根据对象定义的属性进行解 ...

  7. Win7系统中wmiprvse.exe占用CPU高如何解决

    该进程的详细路径是在:C:\WINDOWS\System32\Wbem  我们可以在任务管理器中“wmiprvse.exe”进程上单击右键,选择“打开文件位置”即可看到,如果该文件不在该文件夹中,那么 ...

  8. 双系统删除ubuntu

    我的电脑安装了双系统,Windows和Linux,不过由于Linux在最近一段时间内不会使用,所以我打算删除Linux.    删除Linux最需要注意的地方,就是MBR(Master Boot Re ...

  9. HBuilderX生成本地打包App资源

    http://ask.dcloud.net.cn/question/60254 概要 在HBuilderX中开发的应用可以提交到云端打包生成apk(Android平台)和ipa(iOS平台).如果本地 ...

  10. php后端对跳转的封装

    php后端对跳转的封装 /** * 页面跳转 * $url 跳转地址 * $time 一段时间后跳转 */ function app_redirect($url,$time=0,$msg='') { ...