CODEWITHSUNDEEP
htmlcss
salius
salius

Reputation: 113

How to align two strings with letter-spacing

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.

i.e. 

<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!

Upvotes: 1

Views: 346

Answers (5)

Temani Afif
Temani Afif

Reputation: 272816

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>

Upvotes: 1

Aniket Kudale
Aniket Kudale

Reputation: 449

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  3

Upvotes: 0

HoneyPoop
HoneyPoop

Reputation: 513

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.

Upvotes: 1

All2Pie
All2Pie

Reputation: 360

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.

Upvotes: 0

Harish
Harish

Reputation: 104

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

Upvotes: 0

Related Questions