は、私は10％の幅とサイドバーナビゲーションを持っているサイドバーナビゲーション

Question

の高さを変更します。しかし、一定の幅で（小さい）サイドバーには、次のようになります。

「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>