无法将 div 中的纯文本与文本溢出一起垂直对齐：省略号

Posted 2023-03-05

【中文标题】无法将 div 中的纯文本与文本溢出一起垂直对齐：省略号

【英文标题】：There is no way to vertically align plain text in div along with text-overflow: ellipsis

【发布时间】：2019-10-29 02:22:54

【问题描述】：

我正在使用 ag-grid，当我无法将 div 中的纯文本与 text-overflow: ellipsis 垂直对齐时，我遇到了问题。 可以选择使用 flexbox align-items: center，但在这种情况下，您需要再添加一个 DOM 元素。 (https://css-tricks.com/flexbox-truncated-text) 这不适用于我的情况，因为我不想在每个单元格上都使用 cellRendererFramework。

是否可以在不向父 div 添加更多 DOM 元素的情况下做到这一点？

这里是演示：https://codepen.io/anon/pen/QXjebq

【问题讨论】：

在您的具体示例中，line-height: 100px（即 div 的高度）应该可以解决问题。当然这需要知道 div 的高度...

【参考方案1】：

解决方案 1 - 使用父容器

您实际上必须添加父容器并在其上应用display: flex; align-items: center。试试下面的代码 sn-p 它会帮助你。谢谢

.parent 
  border: 1px solid #000;
  display: flex;
  align-items: center;
  height: 100px;
  width: 100px;


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

<div class="parent">
  <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse!</div>
</div>

解决方案 2 - 没有父容器

您也可以通过添加display: table-cell; vertical-align: middle; max-width: 100px; 来实现。试试下面的代码 sn-p 它会帮助你。谢谢

.text 
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  max-width: 100px;
  height: 100px;
  border: 1px solid #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse!</div>

【讨论】：

我知道这一点，但我询问了没有在父 div 中添加更多 DOM 元素的解决方案。

@ikurc 我刚刚更新了上面的代码sn-p，请检查一下。谢谢