一、div内显示一行，超出部分用省略号显示

white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

二、div内显示两行或三行，超出部分用省略号显示

overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;（行数）
    -webkit-box-orient: vertical;

css 实现div内显示两行或三行，超出部分用省略号显示的更多相关文章

  1. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  2. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  3. android textview 显示一行，且超出自动截断，显示"..."

    android textview 显示一行,且超出自动截断,显示"..." <TextView android:layout_width="wrap_content ...

  4. css一div内文字居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. css实现div内一段文本的两端对齐

    在一个固定宽度的div内,使得P标签内的文本两端对齐: text-align: justify;text-justify:inter-ideograph; <!DOCTYPE html> ...

  6. text-overflow:ellipsis实现超出隐藏时省略号显示

    text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-s ...

  7. span标签中显示固定长度，超出部分用省略号代替，光标放到文字上显示全部

    在span中实现显示某段内容,固定其长度,多余部分用省略号代替,这样就用到html的title属性: 如:<span title="value"></span&g ...

  8. div+css显示两行或三行文字，超出用...表示

    <style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: ...

  9. div+css显示两行或三行文字

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; //需要控制的文本行数 overflow: hidd ...

随机推荐

  1. 我常用的前端开发工具—cutterman,mark man,sublime text,yeoman,gulp……

    虽然才刚刚开始练习切图,不过之前还是接触到不少工具的,决定一一用上,果然用了一天就切完了一个psd,对于一个菜鸟来说,还是很开心的. 我先从学ui网下载了一个psd.切图肯定是要用的ps的啦,这里和大 ...

  2. Vue组件父子间通信01

    子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...

  3. 【ABAP系列】SAP GUI740 PATCH5出现弹窗BUG

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP GUI740 PATCH ...

  4. 关于Vue的理解以及与React框架的对比

    1.Vue的理解 概念: Vue是一套用于构建用户界面的渐进式框架: Vue的核心库只关注视图层: 是一个数据驱动的MVVM框架: 特性: 确实轻量:体积比较小: 数据绑定简单.方便: 有一些简单的内 ...

  5. 第021讲：函数：lambda表达式

    0. 请使用lambda表达式将下边函数转变为匿名函数? def fun_A(x, y=): return x * y me:lambda x,y=3:x*y 1.请将下边的匿名函数转变为普通的屌丝函 ...

  6. 10、应用机器学习的建议(Advice for Applying Machine Learning)

    10.1 决定下一步做什么 到目前为止,我们已经介绍了许多不同的学习算法,如果你一直跟着这些视频的进度学习,你会发现自己已经不知不觉地成为一个了解许多先进机器学习技术的专家了. 然而,在懂机器学习的人 ...

  7. 在react中用装饰器来装饰connect

    假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...

  8. Python之路-Python常用模块-time模块

    一.time模块 常用的一种获取当前时间以及时间格式化的模块,模块名称:time time模块在Python原生安装中就存在所以不需要进行任何安装操作,直接使用即可. 导入方式: import tim ...

  9. windows下使用命令行获取管理员权限

    在win下运行npm install安装依赖出现错误: Error: EBUSY, resource busy or locked 搜索错误信息后发现是由于没有管理员权限,在bash中输入以下命令后运 ...

  10. Maya2014下载安装与激活

    目录 1. 更多推荐 2. 下载地址 2.1. OneDrive 2.2. 其他下载地址 3. 激活步骤 1. 更多推荐 其他Maya版本的下载与激活:https://www.cnblogs.com/ ...