时间戳

首页 > 解决方案 > 左对齐文本，但如果左边太长，则以 ... 为前缀

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

问题描述

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

“建筑物名称/楼层号/部门名称/房间号/台号”

层次结构的末端是最重要的。所以必须显示，但前面的位，可以截断。当数据第一次进入我们显示的区域时没有截断，一切都很好。

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

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

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

这可能与 CSS 或 javascript 吗？

标签： javascriptcss

解决方案

您可能会使用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>

推荐阅读