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>

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

Answer 1

与 :active 一起使用

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

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

在此处查看演示