CSS3 Text Effects
CSS3 contains several new text features.
- word-wrap
- text-shadow
CSS3 Word Wrapping
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:
Demo
<!DOCTYPE html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word:
wellcometoorianaitsolutionudaipur The long word will break and wrap to the next line.</p>
</body>
</html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word:
wellcometoorianaitsolutionudaipur The long word will break and wrap to the next line.</p>
</body>
</html>
Output
This paragraph contains a very long word: wellcometoorianaitsolutionudaipur The long word will break and wrap to the next line.
CSS3 Text Shadow
Demo
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px blue;
}
</style>
</head>
<body>
<h1>Well come to Tuton</h1>
</body>
</html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px blue;
}
</style>
</head>
<body>
<h1>Well come to Tuton</h1>
</body>
</html>
Output
Well come to Tuton
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 |
Related Videos