如何实现两元素间表格的td文本溢出隐藏

我有一个包含Logo、数据表格和按钮的Header，表格中的数据长度不一且可能内容较多，希望实现文本溢出时隐藏。

正常视图：

溢出时的现状：

期望效果：

我尝试为<td>添加以下CSS样式，但并未生效：

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

当前代码 #

CSS #

.top-row {
  height: 60px;
  padding: 10px 10px 10px 10px;
  width: 100%;
}

td {
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  word-break: break-word;
}

header {
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  z-index: 1;
}

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.1);
  width: 60px;
  height: 40px;
  font-size: 14px;
  padding: 4px 0 0 0;
}

.container-fluid {
  display: flex;
  flex-wrap: nowrap;
}

td:first-child {
  border-right: 1px solid white;
  padding-right: 10px;
}

td:nth-child(2) {
  padding-left: 10px;
}

.oi {
  width: 32px;
  top: -2px;
  color: white;
}

.gradient-main-theme {
  background: linear-gradient(to right, #0f0e40, #16436d);
  color: white;
}

HTML #

<header class="gradient-main-theme">
  <div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="">LOGO</a>
      <table class="fl-table">
        <tr>
          <td>Username: Igor</td>
          <td class="vertical-line">Email: kek@gmail.com</td>
        </tr>
        <tr></tr>
        <tr>
          <td>Profilo: Some profile</td>
          <td class="vertical-line">Code: 234232</td>
        </tr>
      </table>
      <NavLink>
        <button class="navbar-toggler" type="button">
              <span class="oi oi-menu"></span>
            </button>
      </NavLink>
    </div>
  </div>
</header>

解决方案 #

你的样式不生效核心原因有两个：

1. <td>默认是自适应宽度的表格单元格，无固定宽度限制时会自动撑开，overflow属性无法触发
2. 你给<td>设置了white-space: initial和word-break: break-word，与实现溢出省略必需的white-space: nowrap冲突

修改步骤 #

1. 调整表格布局规则

给表格添加固定布局，让单元格按比例分配宽度，同时设置单元格的溢出规则：

.fl-table {
  width: 100%;
  table-layout: fixed; /* 固定表格布局，强制单元格按设定宽度分配 */
  border-collapse: collapse;
  margin: 0;
}

td {
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 必须设置单行显示才能触发省略号 */
  width: 50%; /* 两个单元格各占50%宽度 */
}

2. 移除冲突样式

删除<td>原有的white-space: initial和word-break: break-word属性，这两个属性会让文本自动换行，无法实现单行溢出省略效果。

3. 优化Header的Flex布局

确保容器内的元素合理分配空间，避免Logo和按钮被挤压：

.container-fluid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center; /* 垂直居中对齐内容 */
  gap: 1rem; /* 元素间添加间距 */
}

.navbar-brand, .navbar-toggler {
  flex-shrink: 0; /* Logo和按钮不收缩 */
}

.fl-table {
  flex: 1; /* 表格占据剩余可用空间 */
}

修改后完整CSS #

.top-row {
  height: 60px;
  padding: 10px;
  width: 100%;
}

.fl-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
  flex: 1;
}

td {
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50%;
}

header {
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  z-index: 1;
}

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.1);
  width: 60px;
  height: 40px;
  font-size: 14px;
  padding: 4px 0 0 0;
  flex-shrink: 0;
}

.container-fluid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}

td:first-child {
  border-right: 1px solid white;
  padding-right: 10px;
}

td:nth-child(2) {
  padding-left: 10px;
}

.oi {
  width: 32px;
  top: -2px;
  color: white;
}

.gradient-main-theme {
  background: linear-gradient(to right, #0f0e40, #16436d);
  color: white;
}

.navbar-brand {
  flex-shrink: 0;
}

修改后，当单元格内容过长时会自动显示省略号，同时Header布局保持稳定。

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