介绍

溢出 是在盒子无法容纳下太多的内容的时候发生的。

我们知道，CSS 中万物皆盒，因此我们可以通过给width和height（或者inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的。

CSS 尽力减少“数据损失”

以下示例是，CSS默认处理溢出的情况。

示例1：块级元素的溢出

.html
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will  an overflow situation. If overflow is set to hidden then any overflow will not be visible.
</div>

<p>This content is outside of the box.</p>
.css
border: 1px solid #333333;
width: 200px;
height: 100px;

示例2：内联元素的溢出

.word {
  border: 1px solid #333333;
  width: 100px;
  font-size: 250%;
}
<div class="word">Overflow</div>

只要有可能，CSS 就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。

如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！

所以 CSS 反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的 CSS 导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。

如果你已经用width或者height限制住了一个盒子，CSS 会假定，你知道你在做什么，而且你已经控制住了溢出的隐患。

总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。

如何处理溢出 Overflow

• overflow：设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的 块级格式化上下文 时。

是以下属性的简写，包含：

• overflow-x：实验中
• overflow-y：实验中

语法：

overflow = 
  [ visible | hidden | clip | scroll | auto ]{1,2}  

语法示例：

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

取值：

• visible：内容不能被裁减并且可能渲染到边距盒（padding）的外部。

• hidden：如果需要，内容将被裁减以适应边距（padding）盒。
  不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。
  内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。

• clip：内容将以元素的边距（padding）盒进行裁剪，类似于 hidden。
  clip 和 hidden 之间的区别是：clip 关键字禁止所有滚动，包括以编程方式的滚动。
  该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。

• scroll：如果需要，内容将被裁减以适应边距（padding）盒。
  无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。
  打印机可能会打印溢出的内容。

• auto：取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

• overlay： 已弃用。行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。

Mozilla 扩展

• -moz-scrollbars-none：已弃用，请使用 overflow: hidden 代替。

• -moz-scrollbars-horizontal： 已弃用，请使用 overflow-x: scroll 和 overflow-y: hidden，或使用 overflow: scroll hidden 代替。

• -moz-scrollbars-vertical： 已弃用，请使用 overflow-x: hidden 和 overflow-y: scroll，或使用 overflow: hidden scroll 代替。

• -moz-hidden-unscrollable：已弃用，请使用 overflow: clip 代替。

在 Firefox 63 中：-moz-scrollbars-none、-moz-scrollbars-horizontal 和 -moz-scrollbars-vertical 位于特性首选项中。即需要在 about:config 中，将 layout.css.overflow.moz-scrollbars.enabled 设置为 true。

示例：

.css
.d1 {
  margin: 1em;
  font-size: 1.2em;
  border: dotted;
  width: 200px;
  height: 200px;
}
.d2{
    width: 200px;
    height: 40px;
    border: 1px solid green;
    overflow-x: scroll;
}
p { 
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
}
span{
    white-space: nowrap;
}
.html
<div class="d1">
  <code>示例</code>
    <div class="d2">
        <span>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.
        </span>
    </div>
    
    <p>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
        doloremque laudantium.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
        doloremque laudantium.
    </p>
</div> 

其他相关属性值

溢出提示的文本 text-overflow

用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。

属性 并不会强制“溢出”事件的发生。

只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联（inline）方向一致。

语法：

text-overflow = 
[   clip | 
    ellipsis | 
    <string> | 
    fade | 
    fade[<length>,percentage]
]  {1,2}

语法示例：

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

取值：

• clip：默认值。在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。
  如果你的目标浏览器支持 text-overflow，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。

• ellipsis：用一个省略号…来表示被截断的文本。
  这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。

• <string>： 实验性。<string> 用来表示被截断的文本。
  字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小以至于连字符串本身都容纳不下，那么这个字符串也会被截断。

• fade： 实验性。会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。

• fade( <length> | <percentage> )： 实验性。这个函数将会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。 参数决定淡出特效的距离。<percentage> 以行宽而定。小于 0 的值视为 0。大于行宽的值视为行宽。

示例1：

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip1 { text-overflow: clip; }
.overflow-clip2 { text-overflow: ''; }
.overflow-ellipsis { text-overflow: ellipsis; }
.overflow-string { text-overflow: "[..]"; }

.ltr > p {direction: ltr;}
.rtl > p {direction: rtl;}

body{
    display: flex;
    justify-content: space-around;
}

示例2：双值

.overflow-clip-clip { text-overflow: clip clip;}
.overflow-clip-ellipsis { text-overflow: clip ellipsis;}
.overflow-ellipsis-ellipsis { text-overflow: elllipsis ellipsis;}
.overflow-ellipsis-string { text-overflow: ellipsis " [..]";}

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;/* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: scroll;
}

逻辑属性

• overflow-block：设置内容溢出时显示的内容，框的块开始和块结束边缘。

属性映射到overflow-y或overflow-x，具体取决于文档的写入模式。

• overflow-inline：设置内容溢出框的内联开始和结束边缘时显示的内容。

属性映射到overflow-y或overflow-x，具体取决于文档的写入模式。

滚动锚点 overflow-anchor

提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移。

默认情况下，在任何支持滚动锚定行为的浏览器中都将其启用。

语法：

overflow-anchor = 
  auto  |
  none  

大家可能有过这样的浏览体验，就是图片很多的时候，例如漫画网站，尤其是条漫，在手机端，垂直布局这种，如果上方的图片加载慢，那么下方的图片看着看着就会被推下来，然后自己又要重新去滚动定位。

这是一个不太友好的浏览器体验行为。

具体描述为：当前视区上面的内容突然出现的时候，浏览器自动改变滚动高度，让视区窗口区域内容固定，就像滚动效果被锚定一样。

因此，在PC端，在Chrome浏览器下和Firefox浏览器下，当你阅读文章或者看条漫的时候，是感觉不到页面跳动的，就是滚动锚定在其作用。

但是，浏览器自认为正确的事情对于用户而言并一定是想要的。

例如点击下方的一个按钮，会在上方append一些数据，此时，用户希望的是append的数据内容吧下方的按钮推开，优先展示内容，此时，滚动锚定反而拖了后腿，禁止滚动锚定反而是更好的做法。

如何禁止呢？就是使用CSS overflow-anchor属性。

示例：参考文章

单词溢出换行 overflow-wrap

用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

语法：

overflow-wrap = 
  normal      |
  break-word  |
  anywhere    

语法示例：

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

取值：

• normal：行只能在正常的单词断点处中断。（例如两个单词之间的空格）。

• break-work：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

示例：

#d1{ overflow-wrap: normal;}
#d2{ overflow-wrap: break-word;}

其他换行属性比较

1、work-wrap：指定了怎样在单词内断行。

语法：

word-break = 
  normal      |
  keep-all    |
  break-all   |
  break-word  

取值：

• normal：使用默认的断行规则。

• break-all：对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

• keep-all：CJK 文本不断行。Non-CJK 文本表现同 normal。

• break-word：已弃用。他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。

 
 
2、hyphens：告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。

连字规则具有语言特定性。在 HTML 中，语言由 lang 属性决定，浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。在 XML 中，必须使用xml:lang属性。

语法：

hyphens =   none   |   manual  |  auto    

取值：

• none：换行时单词不会被打断，甚至在单词内的字符建议有换行点时。行只会在空白符处换行。
• manual：只有当单词内部的字符提示有换行机会时，单词才会被换行。
• auto：浏览器可以按照自己选择的规则，在合适的断字点上自动断句。

建议换行机会

• -：连字符.
• ­｜ &amp：在HTML中，你可以使用­插入一个软连字符。

示例：

.css
p {
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.html
<ul>
  <li><code>none</code>: 没有连字符;如果需要溢出
    <p lang="en" class="none">An extreme&shy;ly long English word</p>
  </li>
  <li><code>manual</code>: 只有'& amp';或'& shy';(如果需要)
    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
  </li>
  <li><code>auto</code>:在算法决定的地方使用连字符(如果需要)
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>

补充：

注意： word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap。word-wrap 现在被当作 overflow-wrap 的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

• 与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

溢出边距 overflow-clip-margin

决定了设置overflow: clip的元素在被裁剪之前可以绘制到它的边界之外多远。被指定为长度，不允许负值。

语法：

overflow-clip-margin = 
  <visual-box>    ||
  <length [0,∞]>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

语法示例：

overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;

示例：

.box1,.box2,.box3{
    border: 3px solid black;
    width: 250px;
    height: 100px;
    margin-left: 10px;
    
    overflow: clip;
}
.box1{
    overflow-clip-margin: 10px;
}
.box2{
    overflow-clip-margin: 30px;
}