前言

有时候，一行的长度不足以放下一个超长字符串文本，如果不做任何处理，它会发生溢出现象（overflow），见如下示例。

<div class="box">
 Hello, I'm xxxxxxxxxxxxxxxxx.
</div>

.box {
 border: 1px solid red;
 inline-size: 120px;
}

inline-size 和 width 有什么区别？
这和 writing-mode 有关，在水平写作模式下，它就是 width。

我们注意到最后一个长单词它的换行，这是由于 overflow-wrap 的初始值导致的。

解决方法可根据固定尺寸和不固定尺寸两种情况考虑。

固定尺寸的情况

1.设置 overflow: auto

溢出本质上是由于 box 的 overflow 属性的初始值为 visible 导致的，所以我们可以改变它来试试。

.box{
 ...
 /* 溢出部分不可见 */
 overflow-x: hidden;
}

设置显示水平滚动条：

.box{
 ...
 overflow-x: auto;
}

2.设置 overflow-wrap: break-word

overflow-wrap 就是以前的 word-wrap。

设置 overflow-wrap: break-word 后，最后一个溢出单词会换行到下一行（wrap），如果还溢出，就截断溢出部分到下一行（break），以此循环，直到不溢出为止。

3.设置 word-break: break-all

word-break 相比于 overflow-wrap: break-word 就没有第一次的换行操作，而是直接截断。

不固定尺寸的情况：改变父元素宽度

要改变父元素宽度以适应文本内容，就需要了解元素的内在尺寸（或固有尺寸，Intrinsic Sizing），它是 HTML 元素没有设置 CSS 时的原始尺寸。

对应的外部尺寸，它使用诸如 px、em、%、vw、vh、min-width 和 max-width 这样会受外部环境影响的尺寸单位。

Block 元素默认宽度为 100%（外在尺寸），高度为 auto（内在尺寸）；Inline 元素默认宽度和高度均为 auto（内在尺寸）。

而与内在尺寸有关的 CSS 关键字是：min-content、max-content和fit-content。将元素的尺寸设置为它们，元素的尺寸就是内在尺寸。

min-content 表示内容的最小尺寸——最长单词的的大小。

.box{
 ...
 width: min-content;
}

max-content 表示内容的最大尺寸——内容自然展开的长度：

fit-content 表示等同于 fit-content(stretch)，原理是：如果max-content 小于父元素尺寸，fit-content(stretch) 就是 max-content；否则，fit-content(stretch) 就是 min-content 和父元素尺寸的最大值。即 fit-content = min(max-content, max(min-content, available-space))：