我们需要向用户显示某些数据的层次结构。例如,
“建筑物名称/楼层号/部门名称/房间号/桌子 数字”
层次结构的末尾最重要。因此必须将其显示出来,但是最前面的位可以被截断。当数据首先进入我们不被截断显示的区域时,一切都很好。
但是,如果需要截断,则需要截断前面的文本,并应用“ ...”。因此,例如,我们希望看到:
'...名称/房间号/办公桌号'
使用CSS可以吗?目前,我们将尝试查看字符数,但是我知道w和i使用不同的宽度,并且假设字符数> x根本不是个好主意。
CSS或javascript是否可能?
答案 0 :(得分:4)
您可以使用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>