Two small properties that fix common design problems with a single line of CSS.

text-wrap: balance for headings

Distributes the words evenly across lines so a heading never ends with a single orphan word.

css">h1,
h2,
h3 {
    text-wrap: balance;
}

It works best on short blocks of text. Browsers limit it to a few lines, so it is meant for headings, captions and quotes.

text-wrap: pretty for paragraphs

Avoids a lonely last word on the final line of a paragraph.

p {
    text-wrap: pretty;
}

field-sizing: content for auto-growing fields

Makes a textarea or an input grow with its content. It replaces the JavaScript that used to resize textareas.

textarea {
    field-sizing: content;
    min-height: 3lh;
    max-height: 12lh;
}

input.lotgrafix-tag {
    field-sizing: content;
    min-width: 5ch;
}

The lh unit equals the line height, which makes the limits easy to express in lines.

Support note

Both features are safe to use as enhancements. When a browser does not support them, text wraps normally and fields keep a fixed size.