更改側欄導航的高度

Question

我有一個寬度爲10％的側欄導航。但在一定的寬度（較小）邊欄看起來是這樣的：

「Lorem存有」是下海誓山盟這不是我想要的。我希望側欄導航的高度（橙色部分）保持不變，並且文本將在div中消失。我該怎麼做呢？

HTML：

<div id="sideMenu"> 
     <ul> 
      <li> Blog </li> 
      <li> Lorem ipsum </li> 
      <li> Lorem ipsum </li> 
      <li> About us </li> 
      <li> Contact </li> 
     </ul> 
    </div> 

CSS：

#sideMenu { 
    background-color: red; 
    width: 10%; 
    transition: 0.5s; 
    position: fixed; 
    top: 0; 
    height: 100%; 
} 

#sideMenu ul li { 
    background-color: orange; 
    font-size: 20px; 
    padding: 10px 0px; 
    text-align: center; 
} 

Answer 1

可以做到你想通過做以下修改你的代碼做什麼：

#sideMenu { 
    overflow: hidden; 
} 

#sideMenu ul li { 
    white-space: nowrap; 
} 

#sideMenu { 
 
    background-color: red; 
 
    width: 10%; 
 
    transition: 0.5s; 
 
    position: fixed; 
 
    top: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#sideMenu ul li { 
 
    background-color: orange; 
 
    font-size: 20px; 
 
    padding: 10px 0px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
}

<div id="sideMenu"> 
 
    <ul> 
 
    <li> Blog </li> 
 
    <li> Lorem ipsum </li> 
 
    <li> Lorem ipsum </li> 
 
    <li> About us </li> 
 
    <li> Contact </li> 
 
    </ul> 
 
</div>