overflow学习笔记

overflow主要是用来指定当元素超出范围时，如何处理‘溢出’的部分。

文章目录

• • 一、属性值
  • • 1. `visible`（默认）
    • 2. `hidden`
    • 3. `scroll`
    • 4. `auto`
    • 5. `inherit`
  • 二、应用场景
  • 三、应用问题
  • 四、参考链接

一、属性值

• 如果要使 overflow 有效果，父元素必须设置下面二者其一
  • 指定高度 height / max-height
  • white-space: nowrap
• overflow实际由两个属性组成：overflow-x、overflow-y，当我们只写一个属性时，会将这两个属性设置为相同的设置值

1. visible（默认）

元素不会被处理，溢出部分会真实的显示在超出区域

2. hidden

恐怕是我们用的最多的值了，主要用来将溢出部分隐藏掉

3. scroll

会显示滚动条来显示溢出的部分

4. auto

由浏览器决定是否显示滚动条来呈现溢出的部分

5. inherit

从父元素继承 overflow 属性

二、应用场景

• 单行展示省略号

  width: xxxpx; /* 要设置一个宽度，省略号才会生效 */
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  

• 多行展示省略号

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示3行 */
  overflow: hidden;
  

三、应用问题

设置了 overflow:hidden 会导致文字看起来没有和其他元素水平居中对齐（设置了父节点 flex 和 align-item 为 center），解决方案：

vertical-align: bottom

四、参考链接

• overflow-CSS-MDN

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！