Question

我有以下页面作为我正在构建的Web应用程序原型的一部分，我想知道是否有任何方法（仅使用CSS或JS），以避免段落的文本包装从我的画布菜单。

我在构建这种菜单方面非常“绿色”，我用这个原型获得了当前的结果，感谢来自W3Schools的一个例子。

<!DOCTYPE html>
<html>

    <head>

      <style>

        body {
          font-family: "Lato", sans-serif;
        }

        .sidenav {
          height: 100%;
          width: 0;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #ff0000;
          overflow-x: hidden;
          transition: 0.6s;
          padding-top: 180px;
        }

      .sidenav a {
        padding: 10px 0px 10px 35px;
        text-decoration: none;
        font-size: 20px;
        color: #ffffff;
        display: block;
        transition: 0.5s;
      }

      .sidenav a:hover, .offcanvas a:focus{
        color: #a6a6a6;
      }

      .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 35px;
        margin-right: 20px;
      }

      #main {
        transition: margin-left 0.6s;
        padding: 26px;
      }

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

    </style>

  </head>

 <body>

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">Customers</a>
    <a href="#">Pupils</a>
    <a href="#">Teachers</a>
    <!-- Try to separate the word ""AndroidNotices" and you'll see... -->  
    <a href="#">AndroidNotices</a>
  </div>

  <div id="main">
    <h2>Off-Canvas Menu</h2>
    <p>Click on button to open the side navigation menu.</p>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
  </div>

  <script>

    function openNav() {
      document.getElementById("mySidenav").style.width = "200px";
      document.getElementById("main").style.marginLeft = "200px";
    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
    }

   </script>

 </body>

</html>

Answer 1

如果我理解正确，您需要为段落（ white-space: nowrap ）元素设置样式<p>，以防止文本换行......

p {
    white-space: nowrap;
}

使用非画布时如何避免文本换行？

1 个答案: