CODEWITHSUNDEEP
htmlcss
user2748436
user2748436

Reputation: 17

How can I make a span increases in width from the opposite side it.

I have a span tag that has a name inside of it. When I change the name, I want the end of the name to stay in the same place while the beginning of the name moves. So lets say I have a span with the name Eric in it.

<span>Eric</span>

------Eric------

And when I change the name to Johnathan, The position of where the C was is now where the N is located and the rest of the name extends backwards.

<span>Johnathan</span>

-Johnathan------

It usually adds on to the other side like so:

<span>Eric</span>

------Eric------


<span>Johnathan</span> 

------Johnathan-

Upvotes: 0

Views: 76

Answers (2)

Manoj Nama
Manoj Nama

Reputation: 639

If your span has width greater than the text, you could simply do text-align: right, otherwise you could float: right the span so the width increases from the left. (this will work but will depend on your rest of the layout).

Upvotes: 2

the91end
the91end

Reputation: 101

span is an inline element, so you can't change it's width.

you can use div or change the display style of the span to 'inline-block'

<span style="display:inline-block; width:100px; text-align:right;">Eric</span>

Upvotes: 0

Related Questions