html - スパンを反対側から幅を大きくするにはどうすればよいですか。

Question

内部に名前を持つ span タグがあります。名前を変更するとき、名前の先頭が移動する間、名前の末尾が同じ場所に留まるようにしたい。たとえば、Eric という名前のスパンがあるとします。

<span>Eric</span>

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

名前を Johnathan に変更すると、Cの位置がNの位置になり、名前の残りの部分が後ろに伸びます。

<span>Johnathan</span>

-Johnathan------

通常、次のように反対側に追加します。

<span>Eric</span>

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


<span>Johnathan</span> 

------Johnathan-    

Answer 1

スパンの幅がテキストよりも大きい場合は、単純に を実行できますtext-align: right。それ以外の場合はfloat: right、スパンを変更して、幅が左から増加するようにすることができます。(これは機能しますが、残りのレイアウトに依存します)。

Answer 2

spanはinline要素なので、変更することはできませんwidth。

のスタイルを「インラインブロック」に使用divまたは変更できますdisplayspan

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