Working with text in CSS: some issues & solutions

#textstyling #webdesign #css #uiux

1. Few people haven't encountered issues with the paragraph in the hero section. To address this, many developers create a separate div and assign it a specific width, or they apply width or max-width directly to the paragraph. I used to do the same until I discovered the ch unit. This unit counts characters, allowing you to specify how many characters you want per line.

In the example below, the paragraph in the hero section is given max-width: 64ch (60 to 70 characters are recommended). No extra div is needed.

2. Sometimes, a heading might have just one word moving to the next line, or the first line contains more text than the second, which can look unbalanced. We often use the <br> tag or adjust the width to fix this. This issue can also occur with paragraphs. For instance, in the previous example, the last line of the paragraph has less text than the other lines.

A neat solution to this problem is using text-wrap: balance;. In the following example, each line of the paragraph contains roughly the same amount of text.

Similar to balance, there's another value for the text-wrap property called pretty. When the last line of a paragraph or heading contains only one word:

Using text-wrap: pretty; adds another word to the lone word on the last line, so it doesn't stand alone. While browser support for text-wrap: balance; is pretty good, but it's not that good for pretty 😜

3. The text-decoration property is often underutilized. Let's explore the various values it can accept beyond none, and understand that text-decoration is actually a shorthand for four properties:

p {
    /*
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
}

Another interesting property related to text-decoration is text-underline-offset, which allows you to create space between the text-decoration-line and the text.

4. Sometimes, we link long pieces of text in blogs, which often wrap to the next line. Applying a background color to this linked text can look awkward when it breaks onto the next line, as shown in our previous example.

Many encounter this issue when using background colors in headings as well. A neat solution is to use box-decoration-break: clone;. In the following example, the linked text that looked awkward before now displays correctly.

5. While some issues persist occasionally, we can now use text-stroke directly in CSS. Yes, it requires a prefix, but we no longer need to rely on text-shadow tricks like before, which is a significant improvement!

6. The last feature for today is line-clamp. It also requires a prefix, yet it's now widely used. This is commonly seen in cards for various blogs or articles. There are many ways to determine how many lines of text to show on a card. I used to control this using a custom data attribute and JavaScript, specifying the number of characters to display. However, this can be done more easily with line-clamp.

The code block below compiles all the topics discussed, making it convenient to search for and research other uses, browser support, and more.

p {
    max-width: 64ch;
    text-wrap: balance; /* or pretty */
    /**********************/
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    /**********************/
    /*
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
    box-decoration-break: clone;
    text-underline-offset: 3px;
}

h1 {
    -webkit-text-stroke-color: #333;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
}