Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



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:


<!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>

Output

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

CSS3 Text Shadow

<!DOCTYPE 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