Question

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

你可以看到屏幕截图上发生的事情;有点难以解释 -

这就是发生的混乱

这是有足够空间时的外观

http主机始终相同，因此我想在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内容返回。

在建议

的方法时请记住这一点

不管是什么
以及使用...
仅限css

谢谢！

Answer 1

浏览器被赋予一个字符串。当你告诉它缩小它并替换不适合ellipsis的东西时，它总是会从字符串的末尾剪掉。它并不知道你的字符串是反转的，当你告诉它时它会信任你：这个字符串应该从右到左阅读（direction:rtl）。结束在左侧。

因此，仅使用CSS，您可以获得的最接近（且最体面）的东西是从左侧切割并将ellipsis放置在切割的位置：

＆＃13;

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

＆＃13;

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

＆＃13;

您现在有两种选择。任

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

＆＃13;

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('');
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

但是，navigator.userAgent不值得信任，因为恶意机器人永远不会将自己声明为机器人。因此，您可能希望使用更安全的方法来排除机器人，例如指向php脚本的链接（仅可由bots点击），该脚本将为它们设置会话变量。如果设置了变量，只需在页面和上面的JavaScript中添加一个不可见的元素，而不是检查navigator.userAgent，检查添加的元素。
如果您希望某些搜索引擎正确编制索引的电子邮件，则应将其从此项检查中排除。

文本溢出：与方向争夺的省略号：rtl

1 个答案: