溢出:
overflow:visible/hidden/scroll/auto/inherit;

visible:默认值、不剪切。
hidden:超出部分剪切、没有滚动条。
scroll:超出部分有滚动条。
auto:自适应,有滚动条。
inherit:继承父元素的overflow得值。

空余空间:
white-space:pre/pre-wrap/nowrap/pre-line/inherit;

pre:识别回车和空格、不换行。
pre-wrap:识别回车和空格、换行。
nowrap:不识别回车和空格、不换行。
pre-line:识别回车、不识别空格、识别换行。
inherit:继承父元素的white-space属性。

实例:
(1)单行实现省略号:

width:valve;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipse;

(2)

可以不要设置高 自适应 别忘了overflow:hidden;

.box{
  width: 100%;
// height: .70rem;
// line-height: .36rem;
  margin: .2rem 0 .4rem;
  font-size: .28rem;
  overflow: hidden;
}

//超出部分隐藏(可设置多行之后省略号)

//两行超出隐藏
.overhide {
  display: -webkit-box !important;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
//一行超出隐藏
.overhideline1 {
  display: -webkit-box !important;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

overflow(超出部分省略号)的更多相关文章

  1. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  2. CSS控制文字显示一行,超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  3. css实现文本超出部分省略号显示

    一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...

  4. react实现多行文本超出加省略号

    http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; ...

  5. 文本超出显示省略号CSS

    单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...

  6. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  7. Html table 内容超出显示省略号

    内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...

  8. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  9. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  10. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

随机推荐

  1. Ubuntu 16.04 LTS上git提交出现警告Warning: Permanently added 'github.com,52.74.223.119' (RSA) to the list of known hosts. 的解决方法

    问题: Ubuntu 16.04 LTS执行 git pull时总会出现以下警告: Warning: Permanently added 'github.com,52.74.223.119' (RSA ...

  2. 【ORACLE】调整序列的当前种子值

    [ORACLE]调整序列的当前种子值 --必须用SYS用户执行脚本:或具有SYSDBA角色登录: CREATE OR replace ); v_step ):;--步进 tsql ); BEGIN E ...

  3. python基础学习笔记——内置函数

    一. 简介 python内置了一系列的常用函数,以便于我们使用,python英文官方文档详细说明:点击查看, 为了方便查看,将内置函数的总结记录下来. 二. 使用说明 以下是Python3版本所有的内 ...

  4. wordpress无法登录的解决方法

    使用wordpress建站的朋友可能会遇到wordpress管理密码,有时甚至是正确的密码,但是多次尝试输入都无法登录,并且输入用户名和输入电子邮件都无法获取密码,遇到这种情况怎么办,本文教你如何处理 ...

  5. TOJ 3134: 渊子赛马修改版

    3134: 渊子赛马修改版 Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 458     ...

  6. iOS学习笔记20-地图(二)MapKit框架

    一.地图开发介绍 从iOS6.0开始地图数据不再由谷歌驱动,而是改用自家地图,当然在国内它的数据是由高德地图提供的. 在iOS中进行地图开发主要有三种方式: 利用MapKit框架进行地图开发,利用这种 ...

  7. 【Luogu】P2617Dynamic Ranking(树状数组套主席树)

    题目链接 树状数组套主席树有点难懂qwq 不好理解 树状数组套主席树的直观理解应该是:树状数组的每一个节点是一棵主席树. 普通区间修改我们是创建1个线段树,树状数组套主席树的时候我们就创建log个线段 ...

  8. Hadoop 3.1.0 在 Ubuntu 16.04 上的安装过程

    安装过程主要参考官方文档: http://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-common/SingleCluster. ...

  9. 能量项链(codevs 1154)

    题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子 ...

  10. BZOJ4726: [POI2017]Sabota?

    $n \leq 500000$的树,开始有一个点是坏的,如果一个子树中坏点比例(不包括根节点)超过x那这整棵子树就会变坏,问最坏情况下不超过$K$个坏点的情况下$x$最小是多少. 被坑成傻逼.. 可以 ...