# CSS3 Text Effects

« Previous
Next Chapter »

## CSS3 Text Effects

CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

- text-shadow
- word-wrap

## Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property |  |  |  |  |
--- | --- | --- | --- | --- | ---
text-shadow | 10.0 | 4.0 | 3.5 | 4.0 | 9.5
word-wrap | 5.5 | 23.0 | 3.5 | 6.1 | 12.1

## CSS3 Text Shadow

In CSS3, the text-shadow property applies shadow to text.

You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

## Example

Add a shadow to a <h1> element:

h1 {
text-shadow: 5px 5px 5px #FF0000;
}
Try it yourself »

## CSS3 Word Wrapping

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.

In CSS3, 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.

The CSS code is as follows:

## Example

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

p {
word-wrap: break-word;
}
Try it yourself »

## CSS3 Text Properties

Property | Description | CSS
--- | --- | ---
hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box | 3
punctuation-trim | Specifies whether a punctuation character should be trimmed | 3
text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | 3
text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text | 3
text-justify | Specifies the justification method used when text-align is "justify" | 3
text-outline | Specifies a text outline | 3
text-overflow | Specifies what should happen when text overflows the containing element | 3
text-shadow | Adds shadow to text | 3
text-wrap | Specifies line breaking rules for text | 3
word-break | Specifies line breaking rules for non-CJK scripts | 3
word-wrap | Allows long, unbreakable words to be broken and wrap to the next line | 3

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples