时间戳

首页 > 解决方案 > html中的直线

html - html中的直线

问题描述

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

我想要的是这样的：

但更短。

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

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

我没有测试所有这些，但是使用水平线在 Windows Chrome 上不起作用（虽然它在 Ubuntu 和 Android 上起作用），em dash在 Windows Chrome 上工作，但在 Firefox 上不起作用，并且en dash不起作用在 Android Chrome、Windows Chrome 或 Firefox 上都没有。

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

那么，有没有人物能够画出跨浏览器的实线呢？

更新：这就是我需要的

这就是我需要的

标签： htmlutf-8characterlineseparator

解决方案

我不是 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>

推荐阅读