Wie vermeidet man das Umbrechen von Text bei Verwendung von Off-Canvas?

Ich habe die folgende Seite als Teil eines Prototyps für eine Webanwendung, die ich baue, und ich würde gerne wissen, ob es einen Ansatz gibt (mit nur CSS oder JS), um Textumbruch der Absätze zu vermeiden mein Off-Canvas-Menü.Wie vermeidet man das Umbrechen von Text bei Verwendung von Off-Canvas?

Ich bin ziemlich "grün" beim Erstellen dieser Art von Menüs und ich erreichte die aktuellen Ergebnisse mit diesem Prototyp, dank eines Beispiels von 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>

Quelle

2017-06-28 ivanleoncz

Was genau was meinen Sie? Welche Absätze? – liontass

Wenn ich Sie richtig verstanden habe, müssen Sie den Stil white-space: nowrap für den Absatz setzen (<p>) Element, Textumbruch zu verhindern ...

p { 
    white-space: nowrap; 
}

Quelle

2017-06-28 06:07:18

Ich werde auschecken, Mann. Vielen Dank! Ich habe geschlafen, als du die Frage beantwortet hast. – ivanleoncz

Arbeitete wie ein Charme. Danke mann :)! – ivanleoncz

Wie vermeidet man das Umbrechen von Text bei Verwendung von Off-Canvas?

Antwort

Verwandte Themen