CSS hanging-punctuation

In CSS, the hanging-punctuation property controls whether a punctuation mark appears at the beginning or end of a line of text. This property is useful for designing visually appealing text layouts, especially in situations where text blocks need to be aligned with objects or images.

The hanging-punctuation property has four possible values:

none: No hanging punctuation is applied.
first: Punctuation appears outside the text block at the beginning of lines.
last: Punctuation appears outside the text block at the end of lines.
force-end: Punctuation is forced to the end of the line even if it would normally appear at the beginning.

Let's see some examples to understand how the hanging-punctuation property works:

Result:


    p {
      hanging-punctuation: first;
    }

This is a <p> tag with hanging punctuation set to first:

This is an example of hanging punctuation. It helps to create visually appealing text layouts.

Result:


    p {
      hanging-punctuation: last;
    }

This is a <p> tag with hanging punctuation set to last:

This is an example of hanging punctuation. It helps to create visually appealing text layouts.

You can also use the hanging-punctuation property with other CSS properties to further enhance the design of text blocks. Experiment with different values to see which one works best for your particular layout.