如何避免数据展示时自动换行，实现带分隔栏的同行显示

场景1：HTML表格结构 #

如果是表格类数据，通过CSS强制单元格内容不换行，并添加分隔线：

HTML代码：

<table class="nowrap-table">
  <tr>
    <td>用户ID</td>
    <td>用户名</td>
    <td>用户邮箱地址示例@domain.com</td>
    <td>注册时间2024-01-01 12:00:00</td>
  </tr>
</table>

CSS代码：

.nowrap-table {
  border-collapse: collapse;
  width: 100%;
}
.nowrap-table td {
  white-space: nowrap; /* 核心：禁止文本自动换行 */
  border-right: 1px solid #ddd; /* 添加右侧分隔栏 */
  padding: 8px 15px;
}
.nowrap-table td:last-child {
  border-right: none; /* 移除最后一列的分隔线 */
}

场景2：Flex布局容器 #

如果是非表格的行内布局，用Flex配合同样的换行控制属性：

HTML代码：

<div class="nowrap-flex">
  <div class="flex-item">项目A</div>
  <div class="flex-item">项目B</div>
  <div class="flex-item">较长的项目名称不会被自动拆分换行</div>
</div>

CSS代码：

.nowrap-flex {
  display: flex;
  width: 100%;
}
.flex-item {
  white-space: nowrap;
  border-right: 1px solid #ddd;
  padding: 8px 15px;
  flex: 1; /* 自动均分容器宽度，可替换为固定宽度如200px */
}
.flex-item:last-child {
  border-right: none;
}

关键说明 #

white-space: nowrap 是实现不换行的核心CSS属性，它会强制元素内的文本保持在同一行，直到遇到<br>标签才会换行。配合border属性即可添加分隔栏，提升内容可读性。

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