flex:1的列表项文字自动换行，如何避免且保持布局对称？

这个问题我做多语言项目时也碰到过，既要维持flex布局的对称感，又得避免长单词要么挤换行、要么字号太小的尴尬，给你几个实用的解决方案：

方案1：自动断字加连字符（推荐多语言场景） #

德语这类语言的长单词天生适合用连字符断字，我们可以利用CSS的hyphens属性实现自动断字，既保持每个列表项的flex:1，又能让长单词在合适的位置优雅换行，同时不破坏布局对称。

修改后的代码： #

HTML（需指定语言以确保断字规则正确）

<div class="navigation">
  <div class="wrapper">
    <ul class='navUl' lang="de">
      <li>HOME</li>
      <li>ÜBER UNS</li>
      <li>UNSERE LEISTUNGEN</li>
      <li>PREISZUSAMMENSETZUNG</li>
      <li>NÜTZLICHES</li>
      <li>GALERIE</li>
      <li>VIDEOS</li>
      <li>BAUMSCHUTZGESETZ</li>
    </ul>
  </div>
</div>

CSS

.wrapper { width: 960px; height: 100%; margin: 0 auto; }
.navigation { height: 55px; width: 100%; }
.navUl { 
  display: flex; 
  list-style-type: none; 
  align-items: center; 
  justify-content: center; 
  padding-top: 8px;
  padding-left: 0; /* 移除默认内边距，布局更整洁 */
}
.navUl li { 
  flex: 1; 
  margin-right: 10px;
  hyphens: auto; /* 自动断字加连字符 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
  text-align: center; /* 文字居中，提升视觉对称感 */
}
.navUl li:last-child {
  margin-right: 0; /* 移除最后一项的右边距，避免多余空白 */
}

优势：完全保留flex:1的对称布局，长单词可读性强，适配多语言场景，无需单独标记长文本项。

方案2：给长文本项微调flex比例（视觉近似对称） #

如果不想让文字换行，可以给包含长单词的列表项设置一个略大于1的flex值，比如1.2，既不会像flex:2那样破坏对称，又能让长文本完整显示。

修改后的代码： #

HTML（给长文本项加类标记）

<div class="navigation">
  <div class="wrapper">
    <ul class='navUl'>
      <li>HOME</li>
      <li>ÜBER UNS</li>
      <li class="long-item">UNSERE LEISTUNGEN</li>
      <li class="long-item">PREISZUSAMMENSETZUNG</li>
      <li>NÜTZLICHES</li>
      <li>GALERIE</li>
      <li>VIDEOS</li>
      <li class="long-item">BAUMSCHUTZGESETZ</li>
    </ul>
  </div>
</div>

CSS

.wrapper { width: 960px; height: 100%; margin: 0 auto; }
.navigation { height: 55px; width: 100%; }
.navUl { 
  display: flex; 
  list-style-type: none; 
  align-items: center; 
  justify-content: center; 
  padding-top: 8px;
  padding-left: 0;
}
.navUl li { 
  flex: 1; 
  margin-right: 10px;
  text-align: center;
  white-space: nowrap; /* 强制不换行 */
}
.navUl li.long-item {
  flex: 1.2; /* 微调flex比例，仅比普通项宽一点点 */
  min-width: fit-content; /* 确保内容能完整显示 */
}
.navUl li:last-child {
  margin-right: 0;
}

优势：文字完全不换行，视觉上仍保持近似对称，适合追求无换行布局的场景。

方案3：截断加省略号（空间极度有限时备选） #

如果导航栏空间非常紧张，可以用省略号截断长文本，同时配合hover提示显示完整内容。

CSS示例： #

.navUl li { 
  flex: 1; 
  margin-right: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 截断加省略号 */
  position: relative;
}
/* 可选：hover显示完整文本 */
.navUl li:hover::after {
  content: attr(data-text);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}

优势：完全保持布局对称，节省空间；缺点是用户无法直接看到完整文本，需要额外交互。

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