为什么"width:fit content"会阻止长而不连贯的单词换行

Question

在下面的代码片段中，为什么Ex1中的内部内容从外部元素溢出，而在Ex2中却没有发生这种情况？我希望这两个例子要么都溢出，要么都不溢出。

* {
box-sizing: border-box;
}
.outer {
border: 4px solid red;
width: 200px;
}
.inner {
border: 4px solid blue;
width: fit-content;
width: -moz-fit-content;
overflow-wrap: break-word;
max-width: 300px;
}

Ex 1
<div class="outer">
<div class="inner">
kasdhakjsdhaksjdhjhgjhgjhgjhgjhgjhgjhghj 
</div>
</div>
<br />
Ex 2
<div class="outer">
<div class="inner">
asd asd asd asd asd asd asd asd asd asd asd  
</div>
</div>
<br />
Ex 3
<div class="outer">
<div class="inner">
asd asd asd
</div>
</div>

Answer 1

width: fit-content强制容器的宽度与内容相适应，最大不超过max-content的限制。只有当内容无法容纳在容器中时，才会出现断字，但由于容器基本上是无边界的，因此单词不会换行。如果在外部容器上设置overflow: hidden，则可以看到这一点。

来自Mozilla：

最大内容大小关键字表示内容的内在最大宽度。对于文本内容，这意味着内容将完全不换行，即使它会导致溢出。

* {
box-sizing: border-box;
}
.outer {
border: 4px solid red;
width: 200px;
overflow: hidden;
}
.inner {
border: 4px solid blue;
width: fit-content;
width: -moz-fit-content;
overflow-wrap: break-word;
max-width: 300px;
}

Ex 1
<div class="outer">
<div class="inner">
kasdhakjsdhaksjdhjhgjhgjhgjhgjhgjhgjhghj 
</div>
</div>
<br />
Ex 2
<div class="outer">
<div class="inner">
asd asd asd asd asd asd asd asd asd asd asd  
</div>
</div>
<br />
Ex 3
<div class="outer">
<div class="inner">
asd asd asd
</div>
</div>

你也可以通过添加单词break来解决这个问题，当单词碰到容器边缘时，强制单词break。

* {
box-sizing: border-box;
}
.outer {
border: 4px solid red;
width: 200px;
overflow: hidden;
}
.inner {
border: 4px solid blue;
width: fit-content;
width: -moz-fit-content;
overflow-wrap: break-word;
max-width: 300px;
word-break: break-word;
}

Ex 1
<div class="outer">
<div class="inner">
kasdhakjsdhaksjdhjhgjhgjhgjhgjhgjhgjhghj 
</div>
</div>
<br />
Ex 2
<div class="outer">
<div class="inner">
asd asd asd asd asd asd asd asd asd asd asd  
</div>
</div>
<br />
Ex 3
<div class="outer">
<div class="inner">
asd asd asd
</div>
</div>

Answer 2

inline-block配置可以轻松完成：

* {
box-sizing: border-box;
}
.outer {
border: 4px solid red;
width: 200px;
}
.inner {
border: 4px solid blue;
display:inline-block;
overflow-wrap: break-word;
max-width: 100%;
}

Ex 1
<div class="outer">
<div class="inner">
kasdhakjsdhaksjdhjhgjhgjhgjhgjhgjhgjhghj 
</div>
</div>
<br />
Ex 2
<div class="outer">
<div class="inner">
asd asd asd asd asd asd asd asd asd asd asd  
</div>
</div>
<br />
Ex 3
<div class="outer">
<div class="inner">
asd asd asd
</div>
</div>