I’m using a little script which hides mail addresses using the fact that you can reverse text by using unicode-bidi: bidi-override
and direction: rtl
.
<span>
<span>moc.e</span>
<span>ussi-</span>
<span>kaerb</span>
<span>-enil</span>
<span>@sser</span>
<span>dda-l</span>
<span>iam-t</span>
<span>set</span>
</span>
With the following output:
[email protected]
Unfortunately, this doesn’t work when the mail address is too long and contains a line-break:
The reverse text direction causes that the end of the mail address comes before the line break:
-break-issue.com
test-mail-address@line
Check out the code snippet:
div {
display: inline-block;
margin: 0 10px 10px 0;
padding: 10px;
vertical-align: top;
font-size: small;
}
.small {
border: 1px solid red;
width: 170px;
}
.big {
border: 1px solid green;
width: 280px;
}
strong {
display: block;
margin-bottom: 30px;
}
span.eeb-rtl {
unicode-bidi: bidi-override !important;
direction: rtl !important;
display: inline !important;
}
span.eeb-rtl span.eeb-sd {
display: inline !important;
padding-left: 0 !important;
}
<div class="small">
<strong>Small container</strong>
<span class="eeb eeb-rtl">
<span class="eeb-sd">moc.e</span><span class="eeb-sd">ussi-</span><span class="eeb-sd">kaerb</span><span class="eeb-sd">-enil</span><span class="eeb-sd">@sser</span><span class="eeb-sd">dda-l</span><span class="eeb-sd">iam-t</span><span class="eeb-sd">set</span>
</span>
</div>
<div class="big">
<strong>Big container</strong>
<span class="eeb eeb-rtl">
<span class="eeb-sd">moc.e</span><span class="eeb-sd">ussi-</span><span class="eeb-sd">kaerb</span><span class="eeb-sd">-enil</span><span class="eeb-sd">@sser</span><span class="eeb-sd">dda-l</span><span class="eeb-sd">iam-t</span><span class="eeb-sd">set</span>
</span>
</div>
Is there any CSS option to correct the line breaking order in a small container?
The result should be:
test-mail-address@line-
break-issue.com
2
Answers
This is a very dirty solution but hey it works
¯_(ツ)_/¯
. I changed the classnames because I was having a hard time following the code btw.I’m assuming you want to prevent web scraping, so you’re displaying email like this. If you are already using "little script", the best solution is to improve it. With your permission I am trying to reproduce your script. I’m giving you a javascript code example but you can easily transfer to any other programming language like php, becase I think this one should happen on the backend side.