Question

我们需要向用户显示某些数据的层次结构。例如，

“建筑物名称/楼层号/部门名称/房间号/桌子数字”

层次结构的末尾最重要。因此必须将其显示出来，但是最前面的位可以被截断。当数据首先进入我们不被截断显示的区域时，一切都很好。

但是，如果需要截断，则需要截断前面的文本，并应用“ ...”。因此，例如，我们希望看到：

'...名称/房间号/办公桌号'

使用CSS可以吗？目前，我们将尝试查看字符数，但是我知道w和i使用不同的宽度，并且假设字符数> x根本不是个好主意。

CSS或javascript是否可能？

Answer 1

您可以使用text-overflow和direction属性。

div {
  margin:1rem;
  direction: rtl;
  text-align: left;
  width: 45vw;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

<div>Building Name / Floor Number / Section Name / Room Number / Desk Number</div>

左对齐文本，但如果前缀太长，则以...为前缀

1 个答案: