侧边栏文字超出限制

Question

我试图制作一个侧边栏，其中文本/链接应该位于侧边栏的中心，但文本不断溢出，因为单词变得更长，我不知道如何修复它，我尝试使用填充和边距但这行不通。我希望有人可以帮助找出我做错了什么，因为我找不到答案或问题出在哪里

*{
    margin: 0;
    padding: 0;
}

.sidebar{
    background-color: rgb(189, 186, 186);
    width: 10vw;
    font-family: "Fira Sans", sans-serif;
    height: 100vh;
    
}

.sidebar nav{
    padding: 40px;
    
}

.sidebar nav li{
   
    list-style: none;
    font-size: 20px;
    padding: 33px 0;
    white-space: nowrap;
  display: inline-block;
  overflow: hidden;
 
}

.main{
   
    width: 90vw;
}

.container{
    display: flex;
}

.infoContainer{
   
    height: 58vh;
    width: 80vw;
    margin: 140px auto;
    display: flex;
    justify-content: space-around;
}

.devInfo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: "Source Code Pro", monospace;
    margin: 10px;
}

.hello{
    font-size: 50px;
}
.name{
 font-size: 25px;
 font-weight: bold;
 font-family: "Fira Sans", sans-serif;
}
.about{
 font-size: 20px;
}

.moreAbout{
    font-size: 15px;
    font-family: "Fira Sans", sans-serif;
}

.buttons {
    margin-top: 34px;
}
.buttons button{
    padding: 9px 14px;
    border-radius: 22px;
    color: white;
    background-color: dodgerblue;
    font-weight: bold;
    font-size: 21px;
    margin: 0 3px;
    cursor: pointer;
}

.devPic img{
    height: 58vh;
}

<div class="container">
  <div class="sidebar">
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/intro.html">My Intro</a></li>
        <li><a href="/services.html">Services</a></li>
        <li><a href="/contact.html">Contact Me</a></li>
        <li><a href="/blog.html">Blog</a></li>
      </ul>
    </nav>
  </div>
  <div class="main">
    <div class="infoContainer">
      <div class="devInfo">
        <div class="hello">Hi I am</div>
        <div class="name">Awais Rafique</div>
        <div class="about">Developer, Programmer, Software Engineer</div>
       </div>
    </div>
  </div>
</div>

我尝试使用填充和边距将内容更多地移到中间，但它没有像我希望的那样响应

Answer 1

为了解决这个问题，我设置了

overflow: scroll

，这样你就可以在导航栏内滚动，这样它就不会出来了。如果您不希望它滚动，请考虑使用图标。

我已在下面附上此代码片段，请查看：

我希望这有帮助！

*{
    margin: 0;
    padding: 0;
}

.sidebar{
    background-color: rgb(189, 186, 186);
    width: 10vw;
    font-family: "Fira Sans", sans-serif;
    height: 100vh;
    
}

.sidebar nav{
    padding: 40px;
    overflow: scroll;
}

.sidebar nav li{
   
    list-style: none;
    font-size: 20px;
    padding: 33px 0;
    white-space: nowrap;
  display: inline-block;
  overflow: hidden;
 
}

.main{
   
    width: 90vw;
}

.container{
    display: flex;
}

.infoContainer{
   
    height: 58vh;
    width: 80vw;
    margin: 140px auto;
    display: flex;
    justify-content: space-around;
}

.devInfo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: "Source Code Pro", monospace;
    margin: 10px;
}

.hello{
    font-size: 50px;
}
.name{
 font-size: 25px;
 font-weight: bold;
 font-family: "Fira Sans", sans-serif;
}
.about{
 font-size: 20px;
}

.moreAbout{
    font-size: 15px;
    font-family: "Fira Sans", sans-serif;
}

.buttons {
    margin-top: 34px;
}
.buttons button{
    padding: 9px 14px;
    border-radius: 22px;
    color: white;
    background-color: dodgerblue;
    font-weight: bold;
    font-size: 21px;
    margin: 0 3px;
    cursor: pointer;
}

.devPic img{
    height: 58vh;
}
a {
word-wrap: break-word;
}

<div class="container">
  <div class="sidebar">
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/intro.html">My Intro</a></li>
        <li><a href="/services.html">Services</a></li>
        <li><a href="/contact.html">Contact Me</a></li>
        <li><a href="/blog.html">Blog</a></li>
      </ul>
    </nav>
  </div>
  <div class="main">
    <div class="infoContainer">
      <div class="devInfo">
        <div class="hello">Hi I am</div>
        <div class="name">Awais Rafique</div>
        <div class="about">Developer, Programmer, Software Engineer</div>
       </div>
    </div>
  </div>
</div>

Answer 2

不要为侧边栏或主容器设置固定宽度，只需让它们自动计算出宽度即可。

body {
  margin: 0;
}

.container {
  display: flex;
}

.sidebar {
  background-color: rgb(189, 186, 186);
  font-family: "Fira Sans", sans-serif;
  height: 100vh;
  padding: 2em;
}

.sidebar nav {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.sidebar nav a {
  white-space: nowrap;
}

.infoContainer {
  height: 58vh;
  width: 80vw;
  margin: 140px auto;
  display: flex;
  justify-content: space-around;
}

.devInfo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: "Source Code Pro", monospace;
  margin: 10px;
}

.hello {
  font-size: 50px;
}

.name {
  font-size: 25px;
  font-weight: bold;
  font-family: "Fira Sans", sans-serif;
}

.about {
  font-size: 20px;
}

<div class="container">
  <div class="sidebar">
    <nav>
      <a href="/">Home</a></li>
      <a href="/intro.html">My Intro</a>
      <a href="/services.html">Services</a>
      <a href="/contact.html">Contact Me</a>
      <a href="/blog.html">Blog</a>
    </nav>
  </div>
  <div class="main">
    <div class="infoContainer">
      <div class="devInfo">
        <div class="hello">Hi I am</div>
        <div class="name">Awais Rafique</div>
        <div class="about">Developer, Programmer, Software Engineer</div>
       </div>
    </div>
  </div>
</div>