css display: table-cell；让行内元素溢出隐藏为省略号

sandwich_14

已于 2025-02-10 00:02:34 修改

阅读量358

点赞数 6

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端 vue

于 2025-02-07 18:01:02 首次发布

本文链接：https://blog.csdn.net/weixin_61079989/article/details/145499605

css 专栏收录该内容

1 篇文章

订阅专栏

巧用 `display: table-cell` 实现文本溢出省略与布局优化

在前端开发里，文本溢出隐藏显示省略号是常见需求。若在组件行内元素中修改或添加文本实现该效果，过程往往比较繁琐。通常将行内元素转为行内块元素来设定宽度，但会出现行内元素容器溢出问题，导致布局错乱。

问题复现

以下代码尝试通过将行内元素转为行内块元素实现文本溢出省略：

<template>
  <el-descriptions :column="2">
    <el-descriptions-item label="标题1">
      <span class="text-tooltip">这是一段很长很长很长很长很长很长很长很长的文本</span>
    </el-descriptions-item>
    <el-descriptions-item label="标题2">
      <span class="text-tooltip">另一段较长的文本</span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped>
.text-tooltip {
  width:170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block; /* 设置为行内块元素 */
}
</style>

解决方案

将 display 属性改为 table-cell 可解决该问题：

<template>
  <el-descriptions :column="2">
    <el-descriptions-item label="标题1">
      <span class="text-tooltip">这是一段很长很长很长很长很长很长很长很长的文本</span>
    </el-descriptions-item>
    <el-descriptions-item label="标题2">
      <span class="text-tooltip">另一段较长的文本</span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped>
.text-tooltip {
  width:170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table-cell;
}
</style>

`display: table-cell` 的特性与应用

垂直对齐

display: table-cell 会使元素内部内容默认垂直居中。在高度固定的父容器中，子元素文本等内容会垂直居中。适用于卡片式布局，可让卡片内文字垂直居中。

宽高特性

宽度和高度会根据内容自适应，同时受父元素限制。在列表或表格样式布局中，能让元素宽度随内容灵活变化并保持布局规范。

与溢出省略的关系

结合 overflow: hidden、white-space: nowrap 和 text-overflow: ellipsis，display: table-cell 可实现文本溢出显示省略号。因其能明确元素边界，可检测内容是否溢出，常用于表格单元格、卡片标题区域等展示信息场景。