Open In App

CSS hanging-punctuation Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The hanging-punctuation property in CSS provides web designers with 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 alignment 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 the hanging-punctuation property and can use them 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;

Default Value: 

  • none 

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: In this example, we are using the above-explained method.

html




<!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>


Output: 

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

  • Safari 10.0+

Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads