equivalent to text-anchor in regular html elements

Question

Is there any equivalent to text-anchor of svg's <text> element in another html elements (eg. div, span, ...)?

It looks now as following:

<text dy="..." x="..." y="..." style="text-anchor: end;">text</text>

and if I would like to have it in div

<div style="text-anchor: end;">text</div>

it doesn't work, even if I make it absolute positioned.

Answer 1

What about text-align: left|right|center|justify|initial|inherit? You can also use float or margin: X auto if you want to center a block element with a fixed width.

Here you can see different examples:

body {
  font-family: Monospace;
}

div{
  position: relative;
  border:1px solid #CCC;
  margin: .25rem 0 0 0;
  padding: .125rem;
  overflow:hidden;
}

span {
  border: 1px dotted black;
}

/* center-line */

#center-line {
  position:fixed;
  top:0;
  left:50%;
  width:0;
  height: 100%;
  border-left: 2px solid rgba(255, 0, 0, .5);
  box-shadow: -2px 0 0 0 rgba(0, 255, 255, .5)
}

/* text-align */

#ltext {
  text-align:left;
}

#ctext {
  text-align:center;
}

#rtext {
  text-align:right;
}


/* float */

#ltext-float > span{
  float: left;
}

#rtext-float > span{
  float: right;
}


/* margin: X auto */

#ltext-block > span, #ctext-block > span, #rtext-block > span{
  display:block;
  width: 500px;
  margin: 0 auto;
  text-align:left;
}

#ctext-block > span{
  text-align:center;
}


#rtext-block > span{
  text-align:right;
}


/* position: absolute */

#abs-l, #abs-r, #rtl, #rtl-hack {
  height: 1rem;
}

#abs-l > span {
  position: absolute;
  left: 50%;
}

#abs-r > span {
  position: absolute;
  right: 50%;
}


/* direction: rtl */

#rtl > span, #rtl-hack > span {
  position: absolute;
  left: 50%;
  direction:rtl;
  width:0;
  white-space: nowrap;
  border:none;
}

#rtl-hack > span >span:after{
  content:"a";
  font-size: 0;
}

<i id="center-line"></i>

<h3>TEXT-ALIGN</h3>

<div id="ltext">text-align: left;</div>

<div id="ctext">text-align: center;</div>

<div id="rtext">text-align: right;</div>

<h3>FLOAT</h3>

<div id="ltext-float"><span>float: left;</span></div>

<div id="rtext-float"><span>float: right;</span></div>

<h3>MARGIN: X AUTO + DISPLAY: BLOCK + TEXT-ALIGN</h3>

<div id="ltext-block"><span>margin: 0 auto; display: block; text-align: left;</span></div>

<div id="ctext-block"><span>margin: 0 auto; display: block; text-align: center;</span></div>

<div id="rtext-block"><span>margin: 0 auto; display: block; text-align: right;</span></div>

<h3>POSITION: ABSOLUTE</h3>

<div id="abs-l"><span>position: absolute; left: 50%;</span></div>

<div id="abs-r"><span>position: absolute; rigth: 50%; </span></div>

<h3>POSITION: ABSOLUTE + WIDTH: 0 + DIRECTION: RTL + WHITE-SPACE: NOWRAP</h3>

<div id="rtl"><span><span>I'm overflowing to left!</span></span></div>

<div id="rtl-hack"><span><span>With hack!</span></span></div>

EDIT:

You can position absolute-positioned elements with left and make the text overflow to left instead of right with direction: rtl (see the last example). You also need to:

• Set width: 0 so that the text always overflows.
• Set white-space: nowrap to prevent text lines from breaking and not showing up.
• Add an extra element to wrap your text if you need to have a border, background, box-shadow...
• Moreover, some symbols at the end of the text may appear at the beginning, so you will probably need a hack to solve that. You can use the after pseudo-element width font-size: 0.

Note that selecting text may become a pain.

I would just try to use right instead of left on absolute-positioned elements (penultimate example) or any of the other solutions if it is possible for your use case.