Can You Align Text By A Symbol In It?

I want to display a list of email addresses like this: a@domain1.com asd@domain1.com dsasadsd@domain2.com

Solution 1:

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

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

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

Solution 2:

You can also achieve by css position property something like below. Tested copy/paste on Chrome, FF & EDGE working fine also mailto: link as well.

.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;
}
aspan{
  position: absolute;
}
aspan:nth-child(1){
  right: 50%;
  margin-right: 9px;
}
aspan:nth-child(2){
  left: 50%;
  margin-left: 9px;
}

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