文本左对齐,但前缀为..如果左边太长



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

"建筑物名称/楼层编号/分区名称/房间编号/桌子数字">

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

但是,如果我们需要截断,我们需要截断前面的文本,并应用"…"。因此,例如,我们希望看到:

'。。。项目名称/房间编号/办公桌编号'

这在CSS中可能吗?目前,我们将尝试查看字符数,但我知道w和I使用不同的宽度,假设字符数>x根本不是一个好主意。

使用CSS或javascript可以做到这一点吗?

您可以使用text-overflowdirection属性。

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>

相关内容

最新更新