Span Width - [SOLVED]

ProgrammerMoney.com - Sep 6 '21 - - Dev Community

TL;DR Summary

If you try to set span width like you would on div element for example:

span {
  width: 500px;
}
Enter fullscreen mode Exit fullscreen mode

It simply will not work.

What you need to do is change the display type of the span element which is by default inline.

span {
  display: inline-block;
  width: 500px;
}
Enter fullscreen mode Exit fullscreen mode

And now you can see the span width actually changing and it is set to 500px. Background color is only used here so you can easily see the area that span element occupies.

And here is the full code used to generate the image above:

<style>
  body { 
    background-color: lightblue; 
  }
  div { 
    font-size: 40px; 
    margin-top: 300px;
    text-align: center; 
  }
  span {
    background-color: yellow;
    width: 500px;
    display: inline-block;
  }
</style>

<div>
  Do you know how to make
  <span>this span wide</span>
  and other text normal?
</div>
Enter fullscreen mode Exit fullscreen mode

In short this is all you need to know about setting span width.

Until next time,

Will

P.S. check out my Algo-Trading Journey articles

. . . . . . . . . . . . . . . .
Terabox Video Player