使用畫布時如何避免文字換行？

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

如果我對您的理解正確，則需要為段落（ <p> ）元素設置樣式white-space: nowrap ，以防止文本換行...

p {
    white-space: nowrap;
}

使用畫布時如何避免文字換行？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-06-28 06:07:18

使用畫布時如何避免文字換行？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-06-28 06:07:18

解決方案1
1 已采納 2017-06-28 06:07:18