CSS Text Effects

CSS is the mechanism for incorporating style into various web documents. Text Effects enables us to apply various types of effects to text in an HTML document.

Some CSS properties that can be used to add effects to text are listed below:

text-overflow
word-wrap
word-break
writing-mode

1. text-overflow:

The CSS Text overflow property is used to limit text that is wider than its parent. It aids in defining how to represent the portion of overflowing text that is not visible to the user.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        white-space: nowrap;
        width: 140px;
        overflow: hidden;
        text-overflow: clip;
        border: 1px solid #00ab55;
    }
    .ex2 {
        white-space: nowrap;
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #ff4842;
    }
    .ex3 {
        white-space: nowrap;
        width: 140px;
        overflow: hidden;
        text-overflow: "---";
        border: 1px solid  #ffc107;
    }
</style>
</head>
<body>

<p class="ex1">text-overflow: clip (default):</p>
<p class="ex2">text-overflow: ellipsis:</p>
<p class="ex3">text-overflow: "---" (user defined string)</p>

</body>
</html>

Preview

2. word-wrap:

When a word is too long to fit within its parent container, the CSS word-wrap property specifies whether the browser is allowed to line break within it. When a word is too long to fit within a given space, it expands outside of it.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        width: 150px;
        border: 1px solid black;
    }
    .ex1 {
        word-wrap: normal;
    }
    .ex2 {
        word-wrap: break-word;
    }
</style>
</head>
<body>

<h2>word-wrap: normal (default)</h2>
<p class="ex1"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will not break and wrap to the next line.</p>

<h2>word-wrap: break-word</h2>
<p class="ex2"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

Preview

3. word-break:

The phrase-break The CSS property determines whether or not line breaks appear wherever text would otherwise overflow its content box. It specifies the rules for breaking lines.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        width: 150px;
        border: 1px solid black;
    }
    .ex1 {
        word-break: normal;
    }
    .ex2 {
        word-break: keep-all;
    }
    .ex3 {
        word-break: break-all;
    }
</style>
</head>
<body>

<h2>word-break: normal (default)</h2>
<p class="ex1">Thisissomeveryveryverylongword. Words will break according to usual rules.</p>

<h2>word-break: keep-all</h2>
<p class="ex2">Thisissomeveryveryverylongword. This text will-break-at-hyphens.</p>

<h2>word-break: break-all</h2>
<p class="ex3">Thisissomeveryveryverylongword. This text will break at any character.</p>

</body>
</html>

Preview

4. writing-mode:

The CSS writing-mode property determines whether text lines are displayed horizontally or vertically.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        writing-mode: horizontal-tb;
    }
    .ex2 {
        writing-mode: vertical-rl;
    }
    .ex3 {
        writing-mode: vertical-rl;
    }
</style>
</head>
<body>

<p class="ex1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="ex2">vertical-rl</span> writing-mode.</p>
<p class="ex3">Some text with writing-mode: vertical-rl.</p>

</body>
</html>

Preview

CSS Shadows

CSS Web Fonts

CSS Text Effects

1. text-overflow:

Example

2. word-wrap:

Example

3. word-break:

Example

4. writing-mode:

Example

Links

Tutorials

Connect with us