如何将两个字符串与字母间距对齐

Question

I want to make two string with different symbols count the same length. The first letter of str 2 must be starting under first letter of str 1. The same for the last letters.

ie

<h1>123</h1> <!--one symbol more-->
<h1>12</h1> 

I want:

<h1>123</h1> 
<h1>1 2</h1> <!--more letter-space-->

How can I get it dynamically with css for any string length? Maybe no need to use letter-spacing for this!

Answer 1

If you want the output to be something like this:

123
1 2

here is something that will work: HTML

<h1>123</h1>
<h1 class="spacing">12</h1>

CSS:

.spacing{
  letter-spacing:14px;
}

H1 letters are about 14 pixels wide.

Answer 2

If you can initially have space between numbers then you can easily do this by reducing the letter spacing and justifying the text:

 .box { display:inline-block; border:1px solid; }.box h1 { text-align-last:justify; letter-spacing:-0.1em; margin:5px 0; }

 <div class="box"> <h1>1 2 3</h1> <h1>1 2</h1> <h1>1 2 4 5</h1> </div> <h1>1245</h1>

Answer 3

you need to use javascript function and append the data to the element with reference id.

Answer 4

You can achieve this using JavaScript by splitting the inner text and adding spaces then joining again, but if you want to stick with html and css only i will suggest you to add spans in the h1 and give them margin.

Answer 5

You can use non-breaking space &nbsp in HTML

<h1>123</h1>
<h1>1&nbsp&nbsp3</h1>

Use twice for character space.

Preview

123

1 &nbsp3