html - 文字无溢出

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");
};