Css 如何模仿亚马逊的文字智慧涂鸦功能

启用后，eInk Kindles和一些Kindle应用程序会在不太常用的单词上方显示定义。例如：

我试图用标签来模拟这个特性，但是当定义比定义的单词长时，它就不起作用了。另外，如果你仔细看屏幕截图，你会注意到每个单词上面都有一个与其长度相匹配的垂直括号

---

仅使用HTML5和CSS模仿这种布局的最佳方法是什么？

下面是我将如何做到这一点的基本版本，尽管我可以看到在解释并排单词重叠的特定场景中存在一些问题

首先，我将每个单词包装在一个span元素中，并添加了一个带有单词解释的数据工具提示属性。我使用伪元素设计样式，以便解释绝对位于每个单词的顶部，并在要解释的单词上添加了一个带有另一个伪元素的边框顶部，以伪造箭头提示

CSS:

此外，使用Javascript，我假设每个段落的长度都具有相同的宽度，并为以下3种场景创建一个if语句： -要解释的单词在段落长度的前1/3之前 -要解释的单词在段落长度的2/3之后 -要解释的词介于上述两种说法之间 ... 并通过相应地应用类left、right或center来相应地调整解释

Javascript

$(window).on('load resize', function() {
    pw = $('p').first().width();
  $('[data-tooltip]').each(function() {
    pos = $(this).offset().left;
    if (pos < pw/3) {
    console.log('run');
        $(this).removeClass().addClass('left');
    } else if (pos > pw*2/3) {
        $(this).removeClass().addClass('right');
    } else if ((pos > pw/3) && (pos < pw*2/3)) {
        $(this).removeClass().addClass('center');
    }
  })
})

这是一把小提琴：

---

如果并排的两个单词的解释过长且重叠，则必须将解释宽度限制为单词长度，并在末尾添加省略号…-我会使用这个解决方案，或者计算解释长度并进行相应调整-这太多了tbh

也许这对你有用：

p{ 线高：2米； } 跨度{ 位置：相对位置； } 跨度：之后{ 内容：； 宽度：0.3rem； 高度：0.3rem； 显示：块； 位置：绝对位置； 边缘底部：实心1×珊瑚； 左边框：1颗实心珊瑚； 背景：白色； 顶部：-0.1rem； 左：10%； 变换：旋转-45度； } 跨度：之前{ 内容：对虾的定义； 字体大小：.7em； 线高：1rem； 颜色：珊瑚； 位置：绝对位置； 顶部：-1rem； 空白：nowrap； 边缘底部：实心1×珊瑚； 宽度：100%； }

---

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。感谢您的贡献。这是可行的，但我更喜欢史酷洛德的解决方案。

$(window).on('load resize', function() {
    pw = $('p').first().width();
  $('[data-tooltip]').each(function() {
    pos = $(this).offset().left;
    if (pos < pw/3) {
    console.log('run');
        $(this).removeClass().addClass('left');
    } else if (pos > pw*2/3) {
        $(this).removeClass().addClass('right');
    } else if ((pos > pw/3) && (pos < pw*2/3)) {
        $(this).removeClass().addClass('center');
    }
  })
})