您可以通过其中的符号将文本对齐吗? [英] Can you align text by a symbol in it?

问题描述

我要显示这样的电子邮件地址列表:

I want to display a list of email addresses like this:

                        [e-mail]
                      [e-mail]
                 [e-mail]
                       [e-mail]
                       [e-mail]
[e-mail]
                        [e-mail]

因此，首先按域排序，然后按帐户排序，并全部按@符号对齐.排序部分很简单，但是如何使地址像这样排成一行?

So, first sorted by domain, then by account, and all aligned by the @ sign. The sorting part is trivial, but how do I get the addresses to line up like that?

我尝试制作一个<table>并将零件放在不同的单元格中，但是结果是，将它们复制粘贴时，还有一个额外的TAB字符:

I tried making a <table> and putting the parts in different cells, but the result was that when copy-pasting them there was an extra TAB character:

a    @domain1.com
asd    @domain1.com
dsasadsd    @domain2.com
gg    @domain2.com
cc    @g.com
hinxterpexterpoxterfinter    @e.com
j    @foxyfarmfetched.com

不酷.对于奖励积分，最好也将每个电子邮件地址都设置为可点击的mailto:链接，如果将地址分为两个单元格，则不可能.

Not cool. And for bonus points, it would be nice to make each email address a clickable mailto: link as well, which is impossible if the address is split into two cells.

还有其他方法可以达到这种效果吗?还是我不走运?我非常精通HTML/CSS，但是在这种情况下，什么都没想到.

Is there any other way to achieve this effect, or am I out of luck? I'm fairly proficient at HTML/CSS, but in this case nothing comes to mind.

推荐答案

您可以尝试以下操作.复制/粘贴和链接也应该可以正常工作

You can try something like below. It should work fine for the copy/paste and the link too:

a {
 display:table-row;
}
a span {
  display:table-cell;
  text-align:right;
}

<a href="mailto:[e-mail]"><span>a@</span>domain1.com</a>
<a href="mailto:[e-mail]"><span>asd@</span>domain1.com</a>
<a href="mailto:[e-mail]"><span>dsasadsd@</span>domain2.com</a>
<a href="mailto:[e-mail]"><span>gg@</span>domain2.com</a>
<a href="mailto:[e-mail]"><span>cc@</span>g.com</a>
<a href="mailto:[e-mail]"><span>hinxterpexterpoxterfinter@</span>e.com</a>
<a href="mailto:[e-mail]"><span>j@</span>foxyfarmfetched.com</a>

这篇关于您可以通过其中的符号将文本对齐吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！