CSS Text Effects

    In this CSS tutorial, we will be going to learn about all the different properties which can create text effects. By the end of this tutorial, you will have a brief idea on different text properties such as text-overflow, word-wrap, word-break , and writing-mode .

    CSS Text Overflow Property

    The text-overflow defines how should be the content displayed to the user if the overflowed property is hidden. It accepts two value clip and ellipse. clip is the default value of text-overflow and it hide all rest of the text content which does not fit in the element box area. The ellipse value put (…) ellipse symbol after the rendered text.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            p {
              white-space: nowrap;
              width: 200px;
              border: 1px solid black;
              overflow: hidden;
              text-overflow: ellipsis;
            }
        </style>
    </head>
<body>
    <p>Welcome to TechGeekBuzz.com, And this tutorial is all about text effects</p>
</body>
</html>

    CSS word-wrap Property

    The CSS word-wrap property does not let the long words get expanded outside the box model, instead, it breaks the words and wraps onto the next line.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            .with {
              width: 100px;
              border: 1px solid black;
              word-wrap: break-word;
               }

            .without {
              width: 100px;
              border: 1px solid black;
               }
        </style>
    </head>
<body>
    <p class="with">Paragraph with word-wrap property and break-word value, A long worrrrrrrrddddddddddddd</p>
    <p class="without">Paragraph without word-wrap property and break-word value, A long worrrrrrrrrrrrdddddddd</p>
</body>
</html>

    CSS Word Breaking Property

    The word-breaking property defines the line breaking rule for the text words. It specifies whether to break the line with a completely new word or just use the complete width with each line and break the word at any character. It accepts two values keep-all and break-all. The keep-all value breaks the line on hyphen and word limit. The break-all breaks the line on any character.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            .keep {
              width: 100px;
              border: 1px solid black;
              word-break: keep-all;
              }
            .break {
              width: 100px;
              border: 1px solid black;
              word-break: break-all;
               }
        </style>
    </head>
<body>
    <p class="keep">This paragraph every line end with a complete word and start with a complete word</p>
    <p class="break">This paragraph each and every line does not start with a complete word.</p>
</body>
</html>

    CSS writing-mode property

    The writing-mode property specifies whether the text content should display horizontally or vertically on the web page. It accepts two values

    • horizontal-tb (default)
    • vertical-rl

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            p{
                writing-mode: vertical-rl;
            }
        </style>
    </head>
<body>
    <p>Vertical Text</p>
</body>
</html>

    Summary

    • The text-overflow property specifies how should the overflow text display.
    • The word-wrap property breaks the log word so it could fit in the element box area.
    • word-break property defines the line breaking rule for the text.
    • the writing-mode defines the content text presentation on the web-page.
    Previous Tutorial Next Tutorial