文字没有溢出

Question

我不完全确定如何说出这个问题，但我会尝试一下。

我的网站设置了侧面导航菜单。打开菜单时，身体内容将一直推离屏幕，使文本无法读取。我想知道我需要设置什么css属性才能使文本溢出到下一行。

可以在W3Schools中看到这方面的一个例子。打开菜单后，文本不会在屏幕后消失。

CSS

html,
body {
    height: 100%;
    font-family: 'Ubuntu', sans-serif;
}

body {
    padding-top: 70px;
}

body.push {
   overflow-x: hidden;
}

p {
  color: red;
  word-wrap: break-word;
}

.navbar-custom {
  border-radius: 0;
  transition: margin-left 0.5s;
  transition: 0.5s;
  padding-bottom: 6px;
  background-color: transparent;
  border-bottom: 1px solid #e5e5e5;
}

.navbar-custom a {
  transition: 0.5s;
  color: black;
}

.navbar-custom.color {
  background-color: white;
}

.navbar-custom.color a {
  color: black;
}

.navbar-custom.push {
  margin-left: 300px;
  background-color: white;
  border-bottom: 1px solid #e5e5e5;
}

.navbar-custom.push a {
  color: black;
}

.row {
  text-align: center;
}

#main {
  padding-top: 50px;
  transition: margin-left 0.5s;
}

#main.push {
  margin-left: 300px;
}

#sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 40px;
  transition: 0.5s;
  font-size: 15px;
  background-color: white;
}

#sidenav li {
  border-bottom: 1px solid #e5e5e5;
}

#sidenav a {
  padding: 15px 8px 20px 32px;
  text-decoration: none;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#sidenav i {
  padding: 15px 8px 20px 10px;
  text-decoration: none;
  display: inline;
  overflow-x: hidden;
}

#sidenav a:hover,
#sidenav .offcanvas a:focus {
  text-decoration: none;
  color: #ffcc00;
}

#sidenav .social {
  text-align: center;
  padding: 15px 8px 20px 32px;
}

#sidenav .social i:hover {
  transition: 0.3s;
  color: #ffcc00;
}

#sidenav #nav {
  position: absolute;
  top: 0;
  width: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidenav.toggled {
  width: 300px;
  border-right: 1px solid #e5e5e5;
}

@media screen and (max-height: 450px) {
  #sidenav {
    padding-top: 15px;
  }
  #sidenav a {
    font-size: 18px;
  }
}

@media screen and (max-width: 500px) {
  #main.push {
    margin-left: 200px;
  }
  #sidenav .social {
    text-align: left;
  }
  #sidenav.toggled {
    width: 200px;
  }
  .navbar-custom.push {
    margin-left: 200px;
  }
}

HTML

<section id="sidenav">
  <ul id="nav">
    <li class="social">
      <i class="fa fa-envelope"><a href="#" class="hidden-sm hidden-md hidden-lg"><span
                    class="fa fa-envelope"></span></a></i>
      <i class="fa fa-github"><a target="_blank" href="#" class="hidden-sm hidden-md hidden-lg"><span
                class="fa fa-github"></span></a></i>
      <i class="fa fa-linkedin"><a target="_blank" href="#"
                  class="hidden-sm hidden-md hidden-lg"><span class="fa fa-linkedin"></span></a></i>
    </li>
    <li><a href="#">Home <span class="glyphicon glyphicon-home"></span></a></li>
    <li><a href="#">Portfolio <span class="fa fa-folder-open"></span></a></li>
    <li><a target="_blank" href="#">Resume <span class="fa fa-file"></span> </a>
    </li>
  </ul>
</section>
<nav class="navbar navbar-custom navbar-fixed-top">
  <section class="container">
    <section class="navbar-header">
      <a onclick="toggleMenu()" class="navbar-brand">Menu <i class="fa fa-bars" aria-hidden="true"></i></a>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </section>
  </section>
</nav>
<section id="main">
  <section class="container">
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
  </section>
</section>

JS

var main = $("#main");
var sidenav = $("#sidenav");
var body = $("body");
var navbarFixed = $(".navbar-fixed-top");
var navbar = $(".navbar-custom");

function toggleMenu() {
  main.toggleClass("push");
  sidenav.toggleClass("toggled");
  body.toggleClass("push");
  navbarFixed.toggleClass("push");
};