How to control the width of fonts in HTML

There is no way to set width directly for character fonts, but there are other ways to control the width of the character font.

The width of a single character font

The width of a single character font is only affected by the Font-size property.

Font-size

<! DOCTYPE html>
Font width varies significantly (W x H):
Font-size:small


Font-size:normal

Font-size:large


 

Width of multiple character fonts

The width of multiple character fonts, in addition to the number of character fonts, there are several other properties to control.
1. Text-align


 

 
  
 
   
The Text-align property specifies the horizontal alignment of the text in the element.
This property sets the horizontal alignment of text within a block-level element by specifying which point the row box is aligned with.
The value justify can be supported by allowing the user agent to adjust the spacing between letters and words in the line contents;
Different user agents may get different results.
 
  

 
Value and Description


 
 
 
  
 
   
 
    
value
 
    
Description
 
   
 
  
 
 
  
 
   
 
    
Left
 
    
Arrange the text to the left. Default value: determined by the browser.
 
   
 
   
 
    
Right
 
    
Arrange the text to the right.
 
   
 
   
 
    
Center
 
    
Arrange the text in the middle.
 
   
 
   
 
    
Justify
 
    
The effect of aligning the two ends is achieved.
 
   
 
   
 
    
Inherit
 
    
Specifies that the value of the Text-align property should be inherited from the parent element.
 
   
 
  
 

 
Note:
① Although the text-align value justify can change the width of the character font, but there is trickery suspicion. And this width is very difficult to control, not recommended for everyone to use.
② Although all browsers support text-align:justify attributes, Firefox and Chrome implementations are a bit different.


 

 
  
 
   
In Chrome, after setting a property on a fixed-width parent (block-level element) text-align:justify , the effect is applied to all child elements.
 
   
 
    
<p style= "text-align:justify;width:300px" >             <span> This is a piece of text for self introduction. </span>             <p> This is a piece of text for self-introduction. </p>              </p>
 
   
 
   
The text within the span and P elements is justified.
 
   
In the Firefox browser, after setting properties on a fixed-width parent element (block-level element) text-align:justify , the effect will only be used in block-level elements.
 
   
 
    
<p style= "text-align:justify;width:300px" >             <span> This is a piece of text for self introduction. </span>             <p> This is a piece of text for self-introduction. </p>               </p>
 
   
 
   
Only the text within the P element is justified.
 
  

 
Core code:

<style>* {margin:0;border:none;padding:0;} p {margin:30px auto; width:300px;} P p{border:1px solid #000;} </style> <p>    <span> This is a piece of text for self-introduction. Hello everyone, I am a paragraph of my own introduction of the text, yes, you did not guess wrong! I'm just here to make up the words.    </span>        <p>                A youth said, "Speak to us of friendship."                 Your Friend is Your needs answered.                 He is your field which your sow with love and reap with Thanksgiving.                 And he is your board and your fireside.                 For the come to him with your hunger, and the seek him for peace.                 When your friend speaks your fear not the ' nay ' in your own mind, nor does you withhold the "Ay."            </p></p>
For the convenience of observation, we chose Chrome as the subject of our experiment.

Add text-align:justify; Property

P {margin:30px auto;width:300px;text-align:justify;//new property added}

Because the text-align:justity property does not handle the line that forces the break, nor does it handle the last line within the block, in other words, if there is only one line of text in the block (the row is both the first and last row), then only text-align:justify the setting cannot justify the line;
Therefore, this property has minimal effect on changing the font width of characters.


 

2.word-spacing


 

 
  
 
   
The Word-spacing property increases or decreases the space between words (that is, the word interval).
This property defines how many white space characters are inserted between the words in the element.
For this property, "word" is defined as a string enclosed by a whitespace character.
If specified as a length value, the usual interval between words is adjusted;
So, normal is the equivalent of setting it to 0.
Allows you to specify a negative length value, which causes the word to squeeze more tightly between the words.
 
  

 
Value and Description


 
 
 
  
 
   
 
    
value
 
    
Description
 
   
 
  
 
 
  
 
   
 
    
Normal
 
    
Default. Defines the standard space between words.
 
   
 
   
 
    
Length
 
    
Defines a fixed space between words.
 
   
 
   
 
    
Inherit
 
    
Specifies that the value of the Word-spacing property should be inherited from the parent element
 
   
 
  
 

 
Note:
word-spacingproperty only works on phonetic text, and does not work on glyphs. 


 

3.white-space


 

 
  
 
   
The White-space property sets how to handle whitespace within an element.
 
  

 
Value and Description


 
 
 
  
 
   
 
    
value
 
    
Description
 
   
 
  
 
 
  
 
   
 
    
Normal
 
    
Default. The blank will be ignored by the browser.
 
   
 
   
 
    
Or:
 
    
Displays preformatted text in equal-width font, does not combine white space between text, and does not wrap when text is out of bounds.
 
   
 
   
 
    
NoWrap
 
    
Forces the display of all text within the same line, merging extra white space between text until the text ends or encounters a BR object.
 
   
 
   
 
    
Pre-wrap
 
    
Displays preformatted text in equal-width font, does not combine whitespace between text, and wraps when text touches the boundary.
 
   
 
   
 
    
Pre-line
 
    
Keeps the text wrapped, without preserving the white space between the text and wrapping when the text touches the boundary.
 
   
 
  
 

 
Core code

<style>.test p{width:200px; border:1px solid #000;}.        Normal P{word-wrap:normal;}        . Pre P{white-space:pre;}        . Pre-wrap P{white-space:pre-wrap;}        . Pre-line P{white-space:pre-line;}        . nowrap P{white-space:nowrap;}        </style> <ul class= "Test" > <li class= "normal" > <strong>normal:</strong>         <p> softly I'm gone as I gently come </p> </li> <li class= "Pre" > <strong>pre:</strong> <p> softly I'm Gone (here's a lot of test text) as I gently come </p> </li> <li class= "Pre-wrap" > <strong&gt ;p re-wrap:</strong> <p> Softly I'm Gone (here's a lot of test text) as I gently come </p> </li> <li class= "pre-l Ine "> <strong>pre-line</strong> <p> Softly I'm Gone (here's a lot of test text) as I gently come </p> </l     i> <li class= "nowrap" > <strong>nowrap:</strong> <p> gently I'm gone as I gently come </p> &Lt;/li></ul> 

The white-space:nowrap; width of the character font can be changed when the element attribute is the same as the number of characters in the font.


 

4.word-break


 

 
  
 
   
The Word-break property specifies how the wrap is handled.
 
  

 
Value and Description


 
 
 
  
 
   
 
    
value
 
    
Description
 
   
 
  
 
 
  
 
   
 
    
Normal
 
    
Use the browser's default line-wrapping rule.
 
   
 
   
 
    
Break-all
 
    
Allows line wrapping within a word.
 
   
 
   
 
    
Keep-all
 
    
You can only wrap at half-width spaces or hyphens.
 
   
 
  
 

 
Core code

<style> p.test1{width:11em, border:1px solid #000000; word-break:keep-all;} P.test2{width:11em, border:1px solid #000000; word-break:break-all;} </style><p class= "Test1" >this is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> <p class= "Test2" >this is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

By setting word-break:keep-all; properties, it is possible to change the width of the font characters.


 

5.letter-spacing
The previous four attributes are either opportunistic or difficult to control the width. In fact, there is only one property that can control the width letter-spacing .


 

 
  
 
   
The Letter-spacing property increases or decreases whitespace between characters (character spacing).
 
  

 
Value and Description


 
 
 
  
 
   
 
    
value
 
    
Description
 
   
 
  
 
 
  
 
   
 
    
Normal
 
    
Default. There is no additional space between the specified characters.
 
   
 
   
 
    
Length
 
    
Defines a fixed space between characters, which allows negative values to be used.
 
   
 
   
 
    
Inherit
 
    
Specifies that the value of the Letter-spacing property should be inherited from the parent element.
 
   
 
  
 

 
Core code

<style>.test p{border:1px solid #000;}. Normal P{letter-spacing:normal;}. Length p{letter-spacing:10px;} </style><ul class= "Test" >    <li class= "normal" >        <strong> default interval </strong>        <p> Inter-text spacing by default </p>    </li>    <li class= "Length" >        <strong> custom interval size </ strong>        <p> Custom text interval size Hello world</p>    </li></ul>