文本溢出：省略号与方向战斗：rtl [英] text-overflow: ellipsis fighting with direction: rtl

问题描述

我喜欢正确显示电子邮件，意思不是[at]。
为了打击机器人，我反转html中的文本，然后用css使用 direction：rtl 重新反转它。这个工作很多年，直到电子邮件敢打破线。

你可以看到屏幕截图发生了什么;有点难以解释 -

发生的混乱

空间有足够的空间时，它的外观如何？

http主机总是相同的，所以我想到使用 text-overflow：ellipsis 连同 white-space：nowrap 和 overflow：hidden 在< a> 。那个还有南方，还有，

（旁注：我无法完全突出显示可见文本？）
（高亮的结尾是不是框的结尾！）

好的;文本溢出剪辑首先，然后反转;我知道了。
所以我们可以把这个 overflow：hidden 和 text-overflow：ellipsis code>< p> 和空格：nowrap 在 a （害怕一个电话号码会被砍掉）

样式转到 p 和 a ..哪里有一个解决方案（我不幸的是不能再现oO），其中点在右侧（这是我想要的），但文本仍然被切断了结果的视觉左边，意思是电子邮件的名称，我不想剪辑！ / p>

长问题短..
如何获得以下结果？
S.Rossa@park-reside ...

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

 < a href =/ email.php？to = rossaclass =direction> 
<？php echo strrev（[e-mail]）; ？> 
< / a> 
  

由于许多原因，我无法从方向退回：rtl 东西在电子邮件。

请注意，建议一种方式

1. 保持电子邮件不被破坏，无论什么




2. 和一个方便的方法来剪辑它...




3. 仅限css

谢谢！ / p>

解决方案

浏览器被赋予一个字符串。当您告诉它缩小它并替换不符合省略号的内容时，它将始终从字符串的末尾剪切。它不知道你的字符串是颠倒的，它信任你，当你告诉它：这个字符串应该从右到左读取（ direction：rtl ）。最后在左边。

因此，单独使用CSS，您可以获得的最接近（最体面）的东西是从左侧切割，并放置省略号剪切的位置：

  a.direction {direction ：rtl;溢出：隐藏; text-overflow：省略号白空间：nowrap; / *概念证明：* /宽度：25％;显示：inline-block;}  

 < a href = /email.php?to=rossaclass =direction>&＃x202e; ed.dlefla-znediser-krap@assoR.S< / a>  

现在有两个选项。放弃文本溢出：省略号并使用JavaScript伪造它（或者

<作品，但它是丑陋的）或...

1. 您可以在渲染之前反转字符串，放弃方向：rtl （这实际上是一个伎俩，这不正确，是问题的根源）。当然，您需要确保您只为浏览器执行此操作，而不是漫游器。最简单的方法是检查 navigator.userAgent ：

  ）; for（var i = 0; i< directions.length; i ++）{directions [i] .textContent = directions [i] .textContent.split（''）。 }}  

  a.direction {overflow： text-overflow：省略号白空间：nowrap;最大宽度：25％;显示：inline-block;}  

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

然而， navigator.userAgent 不被信任，恶意机器人永远不会声明自己作为机器人因此，您可能希望使用更安全的方法来排除机器人，例如指向将为其设置会话变量的 php 脚本的链接（仅可由bots单击）。如果设置变量，只需在页面和上面的JavaScript中添加一个不可见元素，而不是检查 navigator.userAgent ，检查添加的元素。

如果您希望某些搜索引擎正确索引电子邮件，则应将其从该支票中排除。

I like displaying emails properly, meaning not [at]. To fight the bots I reverse the text in the html and then re-reverse it with css using direction: rtl. That worked fine for many many years, until an email dared to break lines.

You can see what happens on the screenshots; kinda hard to explain–

Thats the mess that happens

This is how it looks when there is enough space

The http-host is always the same, so I figured using text-overflow: ellipsis together with white-space: nowrap and overflow: hidden on the <a>. That went south aswell;

(side note: it wasn't possible for me to fully highlight the visible text?) (The end of the highlight is NOT the end of the box!)

Okay; the text-overflow clipping comes first, then the reversing; I get it. So lets put overflow: hidden and text-overflow: ellipsis on the parent, which is a <p> and the white-space: nowrap on the a (scared that a telephone number will get chopped off)

I played around with a combination which styles go to the p and which to the a .. and I had one solution (which I unfortunately can't reproduce oO) where the dots were at the right side (which is what I want) but the text still gets chopped of an the visual left of the outcome, meaning the name name of the email, which I do not want to clip!

Long question short.. How can I get the following result? S.Rossa@park-reside...

When my email markup looks like this:

<a href="/email.php?to=rossa" class="direction">
<?php echo strrev("[e-mail]"); ?>
</a>

Out of many reasons I cannot go back from the direction: rtl thing on the emails.

Please keep that in mind when suggesting a way to

1. keep the email from breaking lines, no matter what

2. and a convenient way to clip it with ...

3. with css only

Thanks!

解决方案

The browser is given a string. When you tell it to shrink it and replace what doesn't fit with an ellipsis, it will always cut from the end of the string. It doesn't know your string is reversed and it trusts you when you tell it: this string should be read from right to left (direction:rtl). The end is on the left side.

Therefore, with CSS alone, the closest (and most decent) thing you can get is cutting from left side and placing the ellipsis where the cut was made:

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>

You have two options now. Either

1. give up on text-overflow: ellipsis and fake it using JavaScript (works, but it's ugly) or...
2. you could reverse the string before you render it and give up on direction: rtl (which is actually a trick, it's not correct and is the source of the problem). Of course, you need to make sure you only do this for browsers, not for bots. The easiest way would be to check 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>

However, navigator.userAgent is not to be trusted, as malicious bots will never declare themselves as bots. So you might want to use safer methods of excluding bots, such as a link (clickable only by bots) pointing to a php script that would set a session variable for them. If the variable is set, just add an invisible element to your page and in the above JavaScript, instead of checking navigator.userAgent, check for the added element.
If you want the emails correctly indexed by certain search engines, you should exclude them from this check.

这篇关于文本溢出：省略号与方向战斗：rtl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！