Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
Można także przeczytać artykuł w języku: English (US).

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.

/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/* Two keywords */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/* Three keywords */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/* Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;

Initial valuenone
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The hanging-punctuation property may be specified with one, two, or three values.

  • One-value syntax uses any one of the keyword values in the list below.
  • Two-value syntax uses one of the following:
    • first together with any one of last, allow-end, or force-end
    • last together with any one of first, allow-end, or force-end
  • Three-value syntax uses one of the following:
    • first, allow-end, and last
    • first, force-end, and last

Values

none
No character hangs.
first
An opening bracket or quote at the start of the first formatted line of an element hangs.
last
A closing bracket or quote at the end of the last formatted line of an element hangs.
force-end
A 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.

Formal syntax

none | [ first || [ force-end | allow-end ] || last ]

Example

HTML

<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>

CSS

p {
  hanging-punctuation: first last;
  margin: .5rem;
}

Result

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'hanging-punctuation' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 10WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 10Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

Autorzy i etykiety dokumentu

Ostatnia aktualizacja: connorshea,