HTML / CSS: можете ли вы выровнять текст по символу в нем?

Question

Я хочу отобразить список адресов электронной почты, например:

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

Итак, сначала отсортировано по домену, затем по аккаунту, и все выровнены по знаку @. Часть сортировки тривиальна, но как мне настроить адреса таким образом?

Я попытался создать <table> и поместить части в разные ячейки, но в результате при копировании их был дополнительный TAB символ:

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

Не круто. А для бонусных баллов было бы неплохо сделать каждый адрес электронной почты кликабельной mailto: ссылкой, что невозможно, если адрес разделен на две ячейки.

Есть ли другой способ добиться этого эффекта или мне не повезло? Я довольно опытный в HTML / CSS, но в этом случае ничего не приходит на ум.

Answer 1

Вы можете попробовать что-то вроде ниже. Это должно нормально работать для копирования / вставки и ссылки тоже:

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

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

Answer 2

Вы также можете получить с помощью свойства css position что-то вроде ниже.
Протестировано copy/paste на Chrome, FF & EDGE также работает отлично mailto: ссылка также.

.links{
  width: 100%;
  max-width: 1000px;
  display: block;
  margin: 0 auto;
  background-color: #f9f9f9;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial;
  font-size: 15px;
}
a{
  display: table;
  white-space: nowrap;
  text-align: center;
  position: relative;
  padding: 4px;
  margin: 0 auto;
}
a span{
  position: absolute;
}
a span:nth-child(1){
  right: 50%;
  margin-right: 9px;
}
a span:nth-child(2){
  left: 50%;
  margin-left: 9px;
}

<div class="links">
 <a href="mailto:a@domain1.com"><span>a</span>@<span>domain1.com</span></a>
 <a href="mailto:asd@domain1.com"><span>asd</span>@<span>domain1.com</span></a>
 <a href="mailto:lucknow@domain2.com"><span>lucknow</span>@<span>domain2.com</span></a>
 <a href="mailto:gg@domain2.com"><span>gg</span>@<span>domain2.com</span></a>
 <a href="mailto:cc@lorem.com"><span>cc</span>@<span>lorem.com</span></a>
 <a href="mailto:loremispsomdolor@"><span>loremispsomdolor</span>@<span>test.com</span></a>
 <a href="mailto:nameofmail@nameofdomain.co.in"><span>nameofmail</span>@<span>nameofdomain.co.in</span></a>
 <a href="mailto:good@hello.in"><span>good</span>@<span>hello.in</span></a>
</div>