html - 为什么我的元素溢出并创建滚动条？

Question

默认情况下，部分是 block 元素。我做错了什么以及如何解决这个问题？

我的 CSS 很简单，我正在向部分父级(这是唯一的 div)添加样式。

h1 {
  text-align: center;
}

ul {
  display: flex;
  justify-content: flex-end;
  margin: 0 20%;
}

li {
  margin: 5px;
  list-style: none;
}

<h1>
  example
</h1>
<ul>
  <li>rfg</li>
  <li>ert</li>
  <li>sghgh</li>
  <li>sgh</li>
</ul>

<div>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
</div>

https://jsfiddle.net/9ewcexpz/11/

Answer 1

在英语中，当字母之间有空格时，行通常可以换行。 (不同语言的换行规则有所不同。)

但是在您的 section 元素中没有空格，因此行不会换行。

将其添加到您的 CSS 中:

section { word-break: break-all }

https://jsfiddle.net/9ewcexpz/19/

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break