Search code examples
htmlcssfonts

How can I change width of sentence in ASP.NET Core project?


I have an ASP.NET Core project. I want to decrease or increase width of a sentence. I use a CSS class and set font-stretch style, but it doesn't work. Is there another way to do this?

For example:

.font-expanded {
  font-stretch: expanded !important;
}

.font-condensed {
  font-stretch: condensed !important;
}

<p>
      Hello Students
</p>
<p class="font-expanded">
      Hello Students
</p>
<p class="font-condensed">
      Hello Students
</p>

It doesn't work and three paragraphs have same width in browser...


Solution

  • Maybe letter-spacing is what you are searching for:

    .font-expanded {
      letter-spacing: 5px;
    }
    
    .font-condensed {
      letter-spacing: -1px;
    }
    
    <p>
          Hello Students
    </p>
    <p class="font-expanded">
          Hello Students
    </p>
    <p class="font-condensed">
          Hello Students
    </p>
    

    The font-stretch property only selects different font-faces from your font. It doesn't style the text directly (as mentioned in the docs). If your font had different font faces for these values, then the property should work as expected.