侧边栏最小化时导航项图标旁文字换行问题求助

实现侧边栏功能时遇到问题：点击sidebar-toggle按钮后，<li><a href="#"><i class="fa-regular fa-address-book"></i> Contacts</a></li>元素的文字会跳转到下一行，尽管已在样式表中设置了overflow-y: hidden。尝试拆分li元素、调整CSS，但仍未解决问题。以下是相关代码，求指出问题所在，感谢！

HTML代码 #

<body>
    <div id="wrapper">
      <!-- Sidebar -->
      <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
          <li>
            <a href="#"><i class="fa-regular fa-address-book"></i> Contacts</a>
          </li>

          <li>
            <a href="#" class="btn btn-success" id="sidebar-toggle">
            <i class="fa-solid fa-angle-left"></i>
            </a>
          </li>
        </ul>
      </div>
      <!-- Page Content -->
      <div id="page-content-wrapper">
        <!-- Bootstrap container -->
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-12">
              <h1>TEST CONTENT</h1>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- JQuery -->
    <script
      src="https://code.jquery.com/jquery-3.6.3.min.js"
      integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
      crossorigin="anonymous">
    </script>
    <!-- Popper JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"
    ></script>

    <!-- Bootstrap JS -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous">
    </script>

    <!-- Side-bar toggle script -->
    <script>
      $("#sidebar-toggle").click(function (e) {
        console.log("Hello");
        e.preventDefault();
        $("#wrapper").toggleClass("side-bar-minimized");
        $("#sidebar-toggle i").toggleClass("fa-angle-left fa-angle-right");
      });
    </script>
  </body>

CSS代码 #

#sidebar-wrapper {
  z-index: 1;
  position: absolute;
  width: 190px;
  height: 100%;
  background: #2c3e50;
  overflow-y: hidden;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding-left: 190px;
}

#wrapper.side-bar-minimized #sidebar-wrapper {
  width: 50px;
}

#wrapper.side-bar-minimized #page-content-wrapper {
  padding-left: 50px;
}

.sidebar-nav {
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  text-indent: 8px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #ddd;
}

.sidebar-nav li a:hover {
  background: #16a085;
}

问题分析与解决 #

你设置的overflow-y: hidden只负责垂直方向的溢出内容隐藏，但文字换行是因为侧边栏宽度收缩到50px后，水平空间不足，浏览器默认会自动换行。要解决这个问题，需要从两个方面入手：

1. 禁止文字自动换行：给侧边栏的链接添加white-space: nowrap，强制文字在一行显示
2. 隐藏水平溢出内容：给#sidebar-wrapper添加overflow-x: hidden，让超出侧边栏宽度的内容直接隐藏，而不是换行

修改后的CSS

#sidebar-wrapper {
  z-index: 1;
  position: absolute;
  width: 190px;
  height: 100%;
  background: #2c3e50;
  overflow-y: hidden;
  overflow-x: hidden; /* 新增：隐藏水平方向溢出 */
}

/* 保留原有其他CSS规则 */

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #ddd;
  white-space: nowrap; /* 新增：强制文字不换行 */
}

进阶优化（可选）

如果希望折叠时完全隐藏文字，只保留图标，可以给文字包裹一个<span>标签，然后通过CSS控制折叠时隐藏：

修改后的HTML：

<li>
  <a href="#"><i class="fa-regular fa-address-book"></i> <span>Contacts</span></a>
</li>

新增CSS规则：

#wrapper.side-bar-minimized .sidebar-nav li a span {
  display: none;
}

这样调整后，折叠侧边栏时文字不会换行，要么被隐藏，要么被水平溢出裁切掉，完美解决问题。

内容的提问来源于stack exchange，提问作者Brendon Gouws