尽管是 p 标签，为什么这条线没有中断？

Question

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Floating Nav</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="nav">
    <button>A</button>
    <button>B</button>
    <button>C</button>
    <button>D</button>
  </div>
  <div id="root">
    <p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
    </p>
  </div>
</body>

</html>

CSS

html,
body {
  height: 100%;
  margin: 0;
  flex-direction: column;
}

body,
#nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

#nav {
  height: 4rem;
  width: 90%;
  background-image: linear-gradient(170deg, #37F7, #37F9);
  justify-content: space-around;
  border: 0.1rem solid #37F7;
  border-radius: 1rem;
  box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
  position: sticky;
  top: 0;
  z-index: 1;
}

button {
  color: #000;
  border: none;
  height: 3rem;
  width: 3rem;
  border: 0.1rem solid #FFFA;
  border-radius: 0.5rem;
  background-color: #FFFA;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}

button:focus {
  transform: scale(1.1);
  background-color: #FFFC;
  box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}

#root {
  height: 80%;
  width: 90%;
  border: 1px solid red;
}

@media (orientation:landscape) {

  html,
  body {
    flex-direction: row;
  }

  #nav {
    height: 90%;
    width: 4rem;
    flex-direction: column;
  }

  #root {
    width: 80%;
  }
}

我一直在尝试通过

等方式解决这个问题

显示：内联
显示：内联块

但是没用。

当我手动将新行 space 放入文本中时它会起作用，但这不是我最终想要的，文本应该只环绕有限的给定宽度，而不是在一行中超过宽度。网上现有的解决方案似乎对我要找的东西来说太复杂了，谁能告诉我这是怎么回事，我怎样才能让它正常？

html,
body {
  height: 100%;
  margin: 0;
  flex-direction: column;
}

body,
#nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

#nav {
  height: 4rem;
  width: 90%;
  background-image: linear-gradient(170deg, #37F7, #37F9);
  justify-content: space-around;
  border: 0.1rem solid #37F7;
  border-radius: 1rem;
  box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
  position: sticky;
  top: 0;
  z-index: 1;
}

button {
  color: #000;
  border: none;
  height: 3rem;
  width: 3rem;
  border: 0.1rem solid #FFFA;
  border-radius: 0.5rem;
  background-color: #FFFA;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}

button:focus {
  transform: scale(1.1);
  background-color: #FFFC;
  box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}

#root {
  height: 80%;
  width: 90%;
  border: 1px solid red;
}

@media (orientation:landscape) {
  html,
  body {
    flex-direction: row;
  }
  #nav {
    height: 90%;
    width: 4rem;
    flex-direction: column;
  }
  #root {
    width: 80%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Floating Nav</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="nav">
    <button>A</button>
    <button>B</button>
    <button>C</button>
    <button>D</button>
  </div>
  <div id="root">
    <p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
    </p>
  </div>
</body>

</html>

Answer 1

在父 overflow-wrap: break-word;

上使用 CSS

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

html,
body {
  height: 100%;
  margin: 0;
  flex-direction: column;
}

body,
#nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

#nav {
  height: 4rem;
  width: 90%;
  background-image: linear-gradient(170deg, #37F7, #37F9);
  justify-content: space-around;
  border: 0.1rem solid #37F7;
  border-radius: 1rem;
  box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
  position: sticky;
  top: 0;
  z-index: 1;
}

button {
  color: #000;
  border: none;
  height: 3rem;
  width: 3rem;
  border: 0.1rem solid #FFFA;
  border-radius: 0.5rem;
  background-color: #FFFA;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}

button:focus {
  transform: scale(1.1);
  background-color: #FFFC;
  box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}

#root {
  height: 80%;
  width: 90%;
  border: 1px solid red;
  overflow-wrap: break-word;
}

@media (orientation:landscape) {
  html,
  body {
    flex-direction: row;
  }
  #nav {
    height: 90%;
    width: 4rem;
    flex-direction: column;
  }
  #root {
    width: 80%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Floating Nav</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="nav">
    <button>A</button>
    <button>B</button>
    <button>C</button>
    <button>D</button>
  </div>
  <div id="root">
    <p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
    </p>
  </div>
</body>

</html>

尽管是 p 标签，为什么这条线没有中断？

Why is the line not breaking despite being a p tag?

html

css

line-breaks

paragraph

flexbox