MENU


Overflow

text-overflow(with overflow:hidden, see here)
:clip: cuts away any overflowed text.
:ellipsis: shows"..." to represent any overflowed text.

overflow-wrap
:normal: breaks at normal word breakpoints only.
:break-word: breaks lines between any characters if there is no word breakpoint.
:anywhere: like 'break-word' but considers soft wraps when calculating min-content intrinsic sizes.

RESETRUNFULL
<!DOCTYPE html><html><head><style>
   p{
      width:min-content;
      min-width:100px;
      max-width:200px;
      height:50px;
      border:1px solid black;
      overflow: hidden;
   }
   p:nth-child(1){
      overflow-wrap: normal;
   }
   p:nth-child(2){
      overflow-wrap: break-word;
   }
   p:nth-child(3){
      overflow-wrap: anywhere;
   }
   p:nth-child(4){
      text-overflow: ellipsis;
   }
</style></head><body>
   <p>The longest English word is pneumonoultramicroscopicsilicovolcanoconiosis.</p>
   <p>The longest English word is pneumonoultramicroscopicsilicovolcanoconiosis.</p>
   <p>The longest English word is pneumonoultramicroscopicsilicovolcanoconiosis.</p>
   <p>The longest English word is pneumonoultramicroscopicsilicovolcanoconiosis.</p>
</body></html>

break-{before|after|inside}
:auto: allows a break.
:always: forces a break.
:avoid: avoids abreak.
:left: inserts a page break until a blank left page.
:right: inserts a page break until a blank right page.
:[avoid-]{page|column|region}:avoids or forces a specific break.

widows
:5: requires 5 lines at the top when considering whether to move a block to the next page, region or column.

orphans
:5: requires 5 lines at the bottom when considering whether to move a block to the next page, region or column.
Below, 'break-inside:avoid' is redundant for the stanzas, as 'widows' and 'orphans' have already been correctly specified for the poem.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   body{
      columns: 6;
   }
   p{
      widows:4;
      orphans: 4;
      break-inside:avoid;
   }
</style></head><body>
<p>Tell me not, in mournful numbers,<br/>
Life is but an empty dream!—<br/>
For the soul is dead that slumbers,<br/>
And things are not what they seem.<br/></p>

<p>Life is real! Life is earnest!<br/>
And the grave is not its goal;<br/>
Dust thou art, to dust returnest,<br/>
Was not spoken of the soul.<br/></p>

<p>Not enjoyment, and not sorrow,<br/>
Is our destined end or way;<br/>
But to act, that each to-morrow<br/>
Find us farther than to-day.<br/></p>

<p>Art is long, and Time is fleeting,<br/>
And our hearts, though stout and brave,<br/>
Still, like muffled drums, are beating<br/>
Funeral marches to the grave.<br/></p>

<p>In the world's broad field of battle,<br/>
In the bivouac of Life,<br/>
Be not like dumb, driven cattle!<br/>
Be a hero in the strife!<br/></p>

<p>Trust no Future, howe'er pleasant!<br/>
Let the dead Past bury its dead!<br/>
Act,—act in the living Present!<br/>
Heart within, and God o'erhead!<br/></p>

<p>Lives of great men all remind us<br/
>We can make our lives sublime,<br/>
And, departing, leave behind us<br/>
Footprints on the sands of time;<br/></p>

<p>Footprints, that perhaps another,<br/>
Sailing o'er life's solemn main,<br/>
A forlorn and shipwrecked brother,<br/>
Seeing, shall take heart again.<br/></p>

<p>Let us, then, be up and doing,<br/>
With a heart for any fate;<br/>
Still achieving, still pursuing,<br/>
Learn to labor and to wait.<br/></p>

</body></html>
This example shows a portion of a HTML file that defines properties for printers and handheld devices. When printed, all tables always start on a new page, with the following content starting on a new page too.
...
<head><style>
   @media print {
      table {
         break-inside: avoid;
         break-before: page;
         break-after: page;
      }
      p {font-weight:bold;}
   }
</style></head>
...

hyphens
:none: long words are not broken.
:manual: long words are broken with a hyphen as it flows into the next line.

hanging-punctuation
:none: no punctuation may hang outside the line box.
:first: punctuation may hang outside the start edge of the first line.
:last: punctuation may hang outside the end edge of the last line.
:allow-end: punctuation may hang outside the end edge of all lines.
:force-end: punctuation may hang outside the end edge of all lines. It will force it to hang if justification is enabled.

word-break
:normal: lines may break for CJK (Chinese/Japanese/Korean) characters only.
:break-all: lines may break between any characters.
:keep-all: lines may not break.

line-break (breaking CJK lines with punctuation)
:loose: loose
:normal: normal
:strict: strict
:anywhere: anywhere