Question

在另一个html元素（例如div，span，...）中是否有等同于text-anchor svg的<text>元素？

现在看起来如下：

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

如果我想在div

中加入

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

它不起作用，即使我把它放在绝对位置。

Answer 1

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

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。

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

1 个答案: