更改侧栏导航的高度

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>