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

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%;
  }
}

I've been trying to figure this out in ways such as

display:inline
display:inline-block

but it doesn't work.

It works when I manually put new line space inside the text but thats not what I want ultimately the text should just wrap around the limited given width instead of going past the width in a single line. The solutions that exist online seem to be too complex for what I'm looking for, can anyone tell me whats going on here and how can I make it normal?

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>

CodePudding user response：

Use the CSS on the parent overflow-wrap: break-word;

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