html 中的直线

Question

使用 html 绘制整条线的最佳方法是什么？

我想要的是这样的：

但更短。

我知道 [1][2] &horbar; (―)、— (—)、&ndash (–)、数字破折号等的存在...

但问题是它们不是跨平台/跨浏览器的：有时我得到这个 --- 行为而不是这个 ___ 但在中间。

我没有测试所有这些，但是使用 水平线 在 Windows Chrome 上不起作用（而在 Ubuntu 和 Android)，em dash 适用于 Windows Chrome 但不适用于 Firefox 和 en dash 在 Android Chrome、Windows Chrome 或 Firefox 上都不起作用。

我知道我可以制作一个带边框的 span/div 并相对定位它，但问题是它的长度是固定的，而我需要一条根据内容延伸的线（所以---this--- 可能比 ---this longer one---) 长，因为我用不同的语言显示相同的内容。

那么，有没有什么字符可以画出跨浏览器的实线呢？

更新：这就是我需要的

Answer 1

我不是 100% 确定你想要什么，但也许一些 CSS 可以帮助你？我觉得用角色来点缀这里不合适

body {
  text-align: center;
}

.with-line {
  display: block;
}

.with-line:before,
.with-line:after {
  content: "";
  display: inline-block;
  border-top: 1px solid #000;
  width: 3em;
  vertical-align: middle;
  margin: 0 0.5em;
}

<span class="with-line">Short</span>

<span class="with-line">Longer</span>

<span class="with-line">Real long sentence to show the length</span>

Answer 2

如果有人感兴趣，我发现了一堆不同的行，据我测试，其中一些是跨浏览器的：

horizontal bar: &horbar;&horbar;&horbar;&horbar;<br />
em dash: &mdash;&mdash;&mdash;&mdash;<br />
en dash: &ndash;&ndash;&ndash;&ndash;<br />
hypen: &hyphen;&hyphen;&hyphen;&hyphen;<br />
dash: &dash;&dash;&dash;&dash;<br />
box drawings light horizontal: &boxh;&boxh;&boxh;&boxh;<br />
fullwidth low line: &lowbar;&lowbar;&lowbar;&lowbar;<br />
minus: &minus;&minus;&minus;&minus;<br />
combining overline: &oline;&oline;&oline;&oline;<br />
three-em dash: &#11835;&#11835;&#11835;&#11835;<br />
horizontal line extension: &#9135;&#9135;&#9135;&#9135;<br />
horizontal scan line 7: &#9148;&#9148;&#9148;&#9148;<br />
figure dash: &#8210;&#8210;&#8210;&#8210;<br />

来源：1, 2

目前只有 &boxh;、&lowbar;、&oline;、─、⎯、⎼每个平台。

如果您发现其他问题或上述其中一项在某些平台上不起作用，请告诉我。

无论如何，目前我想我还是会使用@Dominik 的解决方案

html 中的直线

Straight line in html

html

character

utf-8

line

separator