css - 触摸时显示截断的文本

Question

正如我们所知，我们可以使用 CSS 截断文本并“以这种方式取消截断:

<style type="text/css">
.one-long-line {
max-width:400px;
white-space:nowrap; 
overflow:hidden;
text-overflow:ellipsis;
}

.one-long-line:hover {
overflow:visible;
}
</style>

我用它在移动 View 中剪切了一个长的 H1，但我希望用户能够看到完整的标题。因为悬停在移动设备上不起作用，所以我想知道是否可以在用户触摸标题的地方编码类似的东西，当然这个代码应该是什么。谢谢

Answer 1

与 :active 一起工作

.overflow-tip {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.overflow-tip:active, .overflow-tip:hover {
  overflow-x: visible;
}

查看演示 here