---
title: CSS Text Effects
description: "> ## CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes > > > > In this chapter you will learn about the following properties: > > > > - `text-overflow` > - `word-wrap` > - `word-break` > -…"
url: "https://apprentice.mn/docs/css-text-effects/"
updated: "2021-05-11"
category: CSS
---

# CSS Text Effects

> ## CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes
>
>
>
> In this chapter you will learn about the following properties:
>
>
>
> - `text-overflow`
> - `word-wrap`
> - `word-break`
> - `writing-mode`

## CSS Text Overflow

The CSS `text-overflow` property specifies how overflowed content that is not displayed should be signaled to the user.

It can be clipped:

This is some long text that will not fit in the box

or it can be rendered as an ellipsis (…):

This is some long text that will not fit in the box

The CSS code is as follows:

     `p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}`

The following example shows how you can display the overflowed content when hovering over the element:

### Example

              `div.test:hover {
  overflow: visible;
}`

## CSS Word Wrapping

The CSS `word-wrap` property allows long words to be able to be broken and wrap onto the next line. 

If a word is too long to fit within an area, it expands outside:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

The word-wrap property allows you to force the text to wrap – even if it means splitting it in the middle of a word:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

he CSS code is as follows:

### Example

Allow long words to be able to be broken and wrap onto the next line

      `p {
  word-wrap: break-word;
}`

## CSS Word Breaking

The CSS `word-break` property specifies line breaking rules.

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

The CSS code is as follows:

### Example

     `p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}`

## CSS Text Effect Properties

The following table lists the CSS text effect properties:

| Property | Description |
| --- | --- |
| text-align-last | Specifies how to align the last line of a text |
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-effects%2F&linkname=CSS%20Text%20Effects](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-effects%2F&linkname=CSS%20Text%20Effects)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-effects%2F&linkname=CSS%20Text%20Effects](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-effects%2F&linkname=CSS%20Text%20Effects)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-effects%2F&linkname=CSS%20Text%20Effects](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-effects%2F&linkname=CSS%20Text%20Effects)[https://www.addtoany.com/share](https://www.addtoany.com/share)