CSS | hanging-punctuation Property

The hanging-punctuation property in CSS provides web designers some upper hand over typography on the webpage. The hanging-punctuation property specifies whether a punctuation mark is placed outside the line box at the start or at the end of some line of text.

Basically, It provides the web designers to set bullets or any symbols to the specific align either left or right so that the first letter is properly aligned with the rest of the document.

We can use the following keywords along with hanging-punctuation property and can use in different modes or types:



  • Keyword values
  • Two Keyword values
  • Three Keyword values
  • Global Keyword values
  • Syntax: For Keyword Values 
    ohanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

  • Syntax: For Two Keyword Values 
    hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

  • Syntax: For Three Keyword Values 
    hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

  • Syntax: For Global Values 
    hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;

Property Values:

Keyword Functionality
none This is the default value for this property. No character hangs.
first Using an available character at the start of the first formatted line of an element hangs.
last An available character at the end of the last formatted line of an element hangs.
force-end Using stop or comma at the end of a line hangs.
allow-end A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            CSS Hanging Punctuation Property
        </title>
        <style>
            p {
                 hanging-punctuation: first;
              }  
        </style>
    </head>
      
    <body>
        <p>“GeeksforGeeks: A computer science portal”</p>
    </body>
</html>

chevron_right






                        filter_none








Output :




Browsers: The browser supported by hanging-punctuation Property are listed below:


    

  • Safari 10.0+
    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
motamarriphani
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.