テキストオーバーフロー：省略記号と方向を合わせる：rtl

Question

[at]ではないことを意味する電子メールを正しく表示するのが好きです。 ボットと戦うために、私はHTML内のテキストを逆順にして、direction: rtlを使ってCSSでそれを逆転させます。電子メールが崩壊するまで、これは長年にわたりうまくいった。

あなたはスクリーンショットで何が起こるかを見ることができます。そう、これは十分なスペース

のhttp-ホストは常に同じであるがあった場合、それはどのように見えるかです

起こる混乱厥

をexplain-するちょっと難しいです私はtext-overflow: ellipsisをwhite-space: nowrapとoverflow: hiddenと一緒に<a>と一緒に使っていると考えました。それも南に行きました。

（サイドノート：私は完全に目に見えるテキストをハイライト表示することができませんでした？） （ハイライトの終わりは、箱の終わりではない！）

わかりました。テキストオーバーフローのクリッピングが最初に行われ、次に反転されます。わかった。 ので<p>と私はスタイルがに行くの組み合わせで遊ん

a（電話番号が切り落とされますことを怖がっ）にwhite-space: nowrapある親、上overflow: hiddenとtext-overflow: ellipsisを置くことができますpこれはa ..と私は残念なことにOOを再現できない1つの解決策を持っていました。ドットが右側にありますが（これは私が望むものですが）、テキストはまだ視覚的に残っています結果の中には、私がクリップしたくない電子メールの名前の名前を意味しています！

ロング質問短い... 私は次のような結果を取得できますか？私は電子メールに戻ってdirection: rtlものから行くことができない多くの理由のうち

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

：私の電子メールのマークアップは次のようになります S.Rossa@park-reside...

。

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>

あなたは今、2つのオプションがあります。実際にはトリックである（あなたがそれをレンダリングする前に文字列を逆にしてdirection: rtlにあきらめることができ

のいずれか

1. は（作品が、それは醜いです）、それはJavaScriptを使用してtext-overflow: ellipsisと偽物をあきらめたり... 、それは正しくなく、問題の原因です）。もちろん、ブラウザ専用で、ボット用ではないことを確認する必要があります。最も簡単な方法は、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は悪質なボットは、ボットとして自分自身を宣言することはありませんよう、信頼されていません。したがって、セッション変数を設定するphpスクリプトを指し示すリンク（ボットだけがクリック可能）など、ボットを除外するより安全な方法を使用することができます。変数が設定されている場合は、ページに表示されない要素を上記のJavaScriptに追加して、navigator.userAgentをチェックするのではなく、追加された要素を確認してください。
特定の検索エンジンによって電子メールが正しく索引化されるようにするには、このチェックから除外する必要があります。