Question

我想在一些文字之后在一个范围内画一条线。该行应该扩展文本的基线。 E.g：

有些文字_____________________（这行用下划线创建，太低了）

我的想法：

<span>Some text<svg><line x1=.. y1=.. x2=.. y2=.. /></svg></span>

但是我如何设置svg-height是该行的y值？

还有其他建议吗？

问候

基督教

Answer 1

如果是单行，flex很容易帮助：

设置 flex：1;到你的svg并删除伪规则。

＆＃13;

span {
  display: flex;
  background: yellow;
}
span + span {
  font-size: 3em;
}
span:after {
  content: '';
  flex: 1;
  border-bottom: 0.1em solid;
  margin-bottom: 0.25em;
}

＆＃13;

<span>Some text</span>
<span>Some text</span>

＆＃13;

或与经典绝对伪相同：（你的svg变为伪）

＆＃13;

span {
  display: block;
  position: relative;
  background: yellow;
  overflow: hidden;
}
span + span {
  font-size: 3em;
}
span:after {
  content: '';
  position: absolute;
  width: 100%;
  border-bottom: 0.1em solid;
  bottom: 0.25em;
}

＆＃13;

<span>Some text</span>
<span>Some text</span>

＆＃13;

或在宽度和负边距的流程中将虚拟宽度减小到零：

＆＃13;

span {
  display: block;
  background: yellow;
  overflow: hidden;
}
span + span {
  font-size: 3em;
  font-family: impact;
}
span:after {
  content: '';
  display:inline-block;
  width: 1980px;
  margin-right:-1990px;
  border-bottom: 0.1em solid;
  vertical-align:baseline;
}

＆＃13;

<span>Some text</span>
<span>Some text</span>

＆＃13;

Answer 2

以下是使用SVG的另一种方法。

＆＃13;

span {
  font-size: 30px;
}

svg.baseline {
  width: 4em;
}

svg.baseline line {
  stroke: red;
  stroke-width: 0.06;
}

＆＃13;

<span>
  Some text
  <svg width="1em" height="1em" viewBox="0 0 1 1" preserveAspectRatio="none" class="baseline">
    <line x1="0" y1="0.97" x2="1" y2="0.97" />
  </svg>
</span>

＆＃13;

SVG被视为图像，默认情况下与文本的基线对齐。您需要在SVG中执行的操作是在SVG的最底部以所需宽度绘制一条线。您可以通过在CSS中更改SVG的宽度来设置行的长度。

这适用于任何字体大小。尝试更改CSS中<span>的字体大小。它目前设置为30px。

Answer 3

基于上述解决方案，这是另一种解决方案：

.baseline {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.baseline svg {
  width: 100%;
  height: 1pt;
  stroke: black;
  stroke-width: 1pt;
}

<div class='baseline'>Hello my baseline
  <svg class='baseline'>
    <line x1='0' y1='50%' x2='100%' y2='50%' />
  </svg>
</div>

高度和笔触宽度应该是相同的值。

如何在HTML / SVG / CSS中的文本基线上绘制一条线

3 个答案: