Search code examples
htmlutf-8characterlineseparator

Straight line in html

What's the best way to draw a whole single line using html?

What I want is something like this:

but shorter.

I know about the existence [1][2] of ― (―), — (—), &ndash (–), figure dash etc...

But the problem is that they are not cross platform / cross browser: sometimes I get this --- behaviour instead of this ___ but in the middle.

I didn't test all of them, but using the horizontal line does not work on Windows Chrome (while it does on Ubuntu and Android), the em dash works on Windows Chrome but does not work on Firefox and the en dash does not work neither on Android Chrome, Windows Chrome or Firefox.

I know that I could just make a span/div with a border and relatively position it, but the problem is that it would be fixed length, while I need a line which extends based on the content (so that ---this--- could be longer than ---this longer one---), since I have the same content displayed with different languages.

So, is there any character able to draw a cross-browser solid line?

UPDATE: This is what I need

This is what I need

Solution

  • I'm not 100% sure what you want but maybe some CSS might help you? I don't think using a character for embellishment is appropriate here.

    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>