Question

默认情况下，节是块元素。我做错了什么，如何解决这个问题？

我拥有的CSS很简单，我将样式添加到父节这是唯一的div。

＆＃13;

h1 {
  text-align: center;
}

ul {
  display: flex;
  justify-content: flex-end;
  margin: 0 20%;
}

li {
  margin: 5px;
  list-style: none;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

您的section文字只是一个字，所以它会溢出。它与flexbox无关。只需添加

section {word-wrap: break-word;}

Answer 3

您有long text continuous word这就是内联行为的原因，因此请添加word-break:break-all或添加spacing，如下所示，

注意 - section元素不是通用容器元素。当一个元素仅用于样式目的或方便脚本，鼓励作者使用div元素。一个一般规则是，section元素仅适用于元素的内容将在文档中明确列出概要

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>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
 </section>
 
 <section>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
  </section>
  <section>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
 </section>  
 <section>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
  </section>  
</div>

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

3 个答案: