显示在悬停隐藏的移动截断文本

Question

我有一个关于如何使用移动设备在 angular 应用程序上显示截断文本的问题...

td {
    word-break: break-all;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
td:hover{
    overflow: visible; 
    white-space: normal;
    height:auto;
}

这足以显示所有截断的文本，但在 PC 中！！！在移动设备上，我知道没有悬停效果，但我今天第一次遇到这个问题！我想知道是否有可能在移动设备上产生类似的效果，当然是在 angular 应用程序中。

在手机上...我能说什么没有功能，甚至不存在！（我的光标在文本字段上，但在屏幕截图中它没有出现。

谢谢大家。

已编辑：

<tr>
 <td>
   {{vName.get(name.property)}}
  </td>
    <td id="grid" "" *ngFor="let varT of part[0] && somecode; let i = index">
      {{interpolation}}
 </td>
 </tr>

所以如果可能的话，我想在 css 之前完成（看起来不可能），也许像我们的第一个答案一样使用 longpressEvents。所以恢复我想要 td 我的文本被截断，当我检查 pc 悬停时工作但我希望手机同样重要，我有办法修复它但它的另一个实现所以我更喜欢学习 "how to make hovers on mobile devices".

Answer 1

在移动设备上悬停就像点击事件。

当您单击它时，它会触发 css 中的悬停。

当您在外部单击时，它会悬停模糊事件。

检查这个 link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_fade1

如果您想以悬停类型等其他方式进行操作，则可以为用户提供眼睛图标并将其绑定到触摸事件。是的，使用触摸开始和触摸结束事件侦听器，您可以在用户持续按下眼睛图标时使 td 可见位数据。为什么是眼睛图标，因为这样用户就知道通过触摸它可以看到内容

检查这个 link。

https://www.w3schools.com/jsref/event_touchstart.asp

显示在悬停隐藏的移动截断文本

Showing on mobile truncate text hidden by hover

html

css

hover

angular