hanging-punctuation
Quick Summary for hanging-punctuation
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.
Code Usage for hanging-punctuation

<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> first<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> last<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> force-end<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> allow-end<span class="token punctuation">;</span> <span class="token comment">/ Two keywords /</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> first force-end<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> first allow-end<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> first last<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> last force-end<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> last allow-end<span class="token punctuation">;</span> <span class="token comment">/ Three keywords /</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> first force-end last<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> first allow-end last<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">hanging-punctuation</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

More Details for hanging-punctuation

hanging-punctuation

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: revert; hanging-punctuation: unset;

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 definition

Initial valuenone
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

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

Examples

Setting opening and closing quotes to hang

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
CSS Text Module Level 3 # hanging-punctuation-property
CSS Tricks: Hanging punctuation Select your preferred language English (US)Français日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in CSS
rgb() rgba() :right right @right-bottom :root rotate rotate() rotate3d() rotateX() rotateY() rotateZ() row-gap ruby-align ruby-position saturate() scale scale() scale3d() scaleX() scaleY() scaleZ() :scope scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type @scroll-timeline
Related Search Terms
CSS property 12
CSS transform 9
CSS text 11
CSS the 14
CSS css 14
CSS details 10
CSS margin 11
CSS CSS 12
CSS https 17
CSS iframe 27
CSS index 14
CSS select 11
CSS git 19
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown
Latest News
## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.