html - 文本溢出 : ellipsis fighting with direction: rtl

Question

我喜欢正确显示电子邮件，意思不是 [at]。为了对抗机器人，我反转了 html 中的文本，然后使用 direction: rtl 通过 css 重新反转它。 .多年来一直很好用，直到一封电子邮件敢于打破行。

您可以在屏幕截图上看到发生了什么；有点难以解释——

这就是发生的困惑

这是有足够空间时的样子

http-host 总是相同的，所以我想使用 text-overflow: ellipsis连同 white-space: nowrap和 overflow: hidden在 <a> 上.那也向南走；

(旁注:我无法完全突出显示可见文本？)(亮点的结尾不是框的结尾!)

好的；文本溢出剪裁先出现，然后是反转；我得到它。所以让我们把overflow: hidden和 text-overflow: ellipsis在父级上，这是一个 <p>和 white-space: nowrap在 a 上(怕电话号码被砍掉)

我尝试了一个组合，哪些样式转到 p以及a .. 我有一个解决方案(不幸的是我无法重现 oO)，其中点位于右侧(这是我想要的)但文本仍然被结果的视觉左侧切掉，这意味着名称电子邮件的名称，我不想剪辑!

长问短..我怎样才能得到以下结果？ S.Rossa@park-reside...

当我的电子邮件标记如下所示时:

<a href="/email.php?to=rossa" class="direction">
<?php echo strrev("S.Rossa@park-residenz-alfeld.de"); ?>
</a>

出于多种原因，我无法从 direction: rtl 返回电子邮件中的内容。

建议方法时请记住这一点

1. 无论如何不要让电子邮件断行

2. 以及用 ... 剪辑它的便捷方式

3. 仅使用 CSS

谢谢!

Answer 1

浏览器被赋予一个字符串。当您告诉它缩小它并用 ellipsis 替换不适合的内容时，它总是会从字符串的末尾开始剪切。它不知道您的字符串被颠倒了，当您告诉它时它会信任您:这个字符串应该从右到左阅读 (direction:rtl)。尽头在左侧。

因此，仅使用 CSS，您可以获得的最接近(也是最体面)的东西是从左侧剪切并将 ellipsis 放置在剪切处:

a.direction {
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  /* proof of concept: */
  width: 25%;
  display: inline-block;
}

<a href="/email.php?to=rossa" class="direction">&#x202e;ed.dlefla-znediser-krap@assoR.S</a>

您现在有两个选择。要么

1. 放弃 text-overflow: ellipsis 并使用 JavaScript 伪造它(可行，但很丑陋)或...
2. 您可以在渲染之前反转字符串并放弃 direction: rtl(这实际上是一个技巧，它不正确并且是问题的根源)。当然，您需要确保只对浏览器执行此操作，而不是对机器人执行此操作。最简单的方法是检查 navigator.userAgent:

if (!/bot|crawler|spider|crawling/i.test(navigator.userAgent)) {
  var directions = document.querySelectorAll('.direction');
  for (var i = 0; i < directions.length; i++ ) {
    directions[i].textContent = directions[i].textContent.split('').reverse().join('');
  }
}

a.direction {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  max-width: 25%;
  display: inline-block;
}

<a href="/email.php?to=rossa" class="direction">ed.dlefla-znediser-krap@assoR.S</a>

但是，navigator.userAgent 是不可信的，因为恶意机器人永远不会将自己声明为机器人。因此，您可能希望使用更安全的方法来排除机器人程序，例如指向将为它们设置 session 变量的 php 脚本的链接(只能由机器人程序单击)。如果设置了变量，只需将一个不可见元素添加到您的页面，并在上面的 JavaScript 中检查添加的元素，而不是检查 navigator.userAgent。
如果您希望电子邮件被某些搜索引擎正确编入索引，则应将它们排除在此检查之外。