html - 相当于常规 html 元素中的 text-anchor

Question

有没有等价于text-anchor的svg 的 <text>另一个 html 元素(例如 div、span、...)中的元素？

现在看起来如下:

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

如果我想把它放在 div 中

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

它不起作用，即使我将它设为绝对定位也是如此。

Answer 1

text-align: left|right|center|justify|initial|inherit呢？ ？如果您想将具有固定 宽度 的 block 元素居中，您还可以使用 float 或 margin: X auto。

在这里你可以看到不同的例子:

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>

编辑:

您可以使用 left 定位绝对定位元素，并使用 direction: rtl 使文本溢出到左侧而不是右侧(参见最后一个示例)。您还需要:

• 设置 width: 0 使文本总是溢出。
• 设置white-space: nowrap以防止文本行中断和不显示。
• 如果您需要border、background、box-shadow...，请添加一个额外的元素来包裹您的文本......<
• 此外，文本末尾的一些符号可能会出现在开头，因此您可能需要破解才能解决这个问题。您可以使用 after 伪元素宽度 font-size: 0。

请注意，选择文本可能会很痛苦。

如果您的用例可行，我会尝试在绝对定位元素(倒数第二个示例)或任何其他解决方案上使用 right 而不是 left .