屏幕尺寸太小时文本重叠

Question

我目前正在制作我的学习项目页面。我希望它能够响应，因为它是它的一部分。但是，当屏幕尺寸为 head、section 和 body 中的小字时，它们会重叠。如果没有足够的 space 用于所有单词（整个句子），我无法将单词转到另一行。我试过使用断字，但没有用。有谁知道我可以做些什么来改变它？

<html lang="pl-PL">
  <head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="css.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="My hobby page.">
    <meta name="keywords" content="books, hobby">
    <meta name="author" content="Bogna Gondek">
    <link rel="stylesheet" href="css.css">
    <script type="text/javascript" src="js.js"></script>
    <title>Książki Moje Hobby | Witamy</title>
  </head>
<body>
    <header>
         <h1>Książki Moje Hobby</h1>
         <nav>
           <ul>
             <li><a class="aktywny" href="strona_główna.html">Strona Główna</a></li>
             <li><a href="kontakt.html">Kontakt</a></li>
           </ul>
         </nav>
    </header>
    <div id="wnętrze">
      <section>
      <h2>„Bajki są więcej niż prawdą: nie dlatego, że mówią nam, że smoki istnieją, ale dlatego, że mówią, że smoki można pokonać.”</h2>
      <h3>― Neil Gaiman, „Coraline"</h3>
    </section>
    </div>
    <footer>
    Książki Moje Hobby, Copywright &copy; 2019
    </footer>
  </body>
</html>

body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 2px;
padding:0;
margin: 0;
background-color: white;
}

header
{
  width: 100%;
  margin: auto;
  overflow: hidden;
  padding-top: 20px;
  min-height: 70px;
  background-color: #404040;
}

header h1
{
  margin-left: 20px;
  float:left;
  color: #f2f2f2;
}

header nav
{
  float:right;
  margin-top:10px;
  margin-right: 20px;
  margin-bottom: 20px;
}

header li
{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}
header a
{
  text-decoration: none;
  color: #f2f2f2;
  font-size: 22px;
}
header a:hover
{
  font-weight: bold;
}
header .aktywny
{
  color:  #b3b3b3;
}
div#wnętrze
{
  max-width:100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  background:url("obrazki/glownyobrazek.jpg") no-repeat 0;

  color: #f2f2f2;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section
{
  background-color: red;
  max-width: 80%;
  word-wrap: break-all !important;
}
footer
{
  padding: 20px;
  margin-top: auto;
  background-color: #404040;
  text-align: center;
  color: #f2f2f2;
}

Answer 1

问题是您在正文中设置的行高。

body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 1;
padding:0;
margin: 0;
background-color: white;
}

屏幕尺寸太小时文本重叠

Text overlapping when screen size is to small

html

css

responsive

word-break