在移动设备上显示缩写和首字母缩略词

Question

我经常在我的网站上使用缩写标签（以前是首字母缩写标签）。但我注意到这个标签在移动/平板设备（触摸设备）上无法正常工作。所以我的问题是：我该如何让它能够正常工作？

我在互联网上搜索了一些解决方案，但它们并不完全有用：

解决方案1：

abbr[title]:after
{
   content: " (" attr(title) ")";
}

@media screen and (min-width: 1025px)
{
   abbr[title]
   {
      border-bottom: 1px dashed #ADADAD;
      cursor:help;
   }

   abbr[title]:after
   {
      content: "";
   }
}

解决方案2：

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { $('abbr').each(function() { $(this).click(function() { alert($(this).attr('title')); }); }); }

没有一个是完全令人满意的！因此，一些替代方案将不胜感激！

- Senep Ali

---

什么都没有吗？！我对任何建议都很开放 :D - Senep Ali

这些网络浏览器应该为我们完成这项工作，但到2022年仍然没有任何进展。 - vee

Answer 1

在2016年，当我进行搜索时，结果相同。但最终我找到了一个简单的解决办法：我决定使用工具提示而不是警报。

这个示例是针对jQuery和bootstrap工具提示。

因此，在解决方案2中，您检测移动设备后（按照您的意愿操作）：

$('abbr').attr('data-toggle', 'tooltip'); // add atribute to all abbrs
$('[data-toggle="tooltip"]').tooltip(); // initialize tooltips on all abbrs 

- voznik

---

这也解决了我的问题 - 但请注意，您需要包括 popper.js（在 bootstrap.js 之前将以下内容添加到 bootstrap bundle 中 "~/Scripts/umd/popper.js"）。 - Dominic Cotton

Answer 2

感谢这位大佬。 https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/

以下是解决此问题的CSS方案。

<style>
@media screen and (min-width: 0px) {
    abbr[data-title] {
        position: relative;

        /* ensure consistent styling across browsers */
        text-decoration: underline dotted;
    }

    abbr[data-title]:hover::after,
    abbr[data-title]:focus::after {
        content: attr(data-title);

        /* position tooltip like the native one */
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;

        /* style tooltip */
        background-color: #1e1e1e;
        color: #fff;
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
        font-size: 14px;
        padding: 3px 5px;
    }
}

</style>

abbr标签的title属性会导致重复问题，因此我们可以将title属性更改为data-title，以解决重复问题。为了在任何尺寸上使用此功能，我将min-width保持为0px

我们可以在移动屏幕或PC屏幕上点击abbr标签，它将以相同的方式工作，没有任何重复。 我已经在Chrome上尝试过，并且工作正常。

- Farhan Basheer.

---

虽然我喜欢这个解决方案，但当数据标题位于屏幕的右侧或底部过多时，它并不完全可见。在移动设备上经常会出现这种情况，因为数据标题往往很长，而移动设备的屏幕宽度相对较小。 - Code4R7