CSS Tutorial - CSS3 Text Effects








CSS3 introduces several new text properties we can use to style text.

CSS3 Text Shadow

In CSS3, we can use the text-shadow property applies shadow to text.

text-shadow accepts a comma-separated list of shadows to be applied to the text. 


<!DOCTYPE html>
<html>
<head>
<style>
h1 {<!--  w  w  w  .  j  av a2  s  .  com-->
    text-shadow: 10px 10px 10px #CCC;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

The code above is rendered as follows:





CSS3 Word Wrapping

In CSS3, we can use the word-wrap property to force the text to wrap in the middle of a word.

Its possible values are

  • normal - break at normal word break points.
  • break-word - break the work if necessary.

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {<!--from   ww w .  ja  v  a 2s . co m-->
    width: 11em; 
    border: 1px solid #000000;
    word-wrap: break-word;
}
</style>
</head>
<body>

<p class="test"> 
This paragraph contains a very long 
word: thisisaveryveryveryveryveryverylongwooooooooooooooooooord. 
The long word will break and wrap to the next line.
The long word will break and wrap to the next line.</p>

</body>
</html>

The code above is rendered as follows:





CSS3 Text Overflow

The text-overflow property in CSS3 determines how to signal overflowed content to the users.

It can be clipped, or display an ellipsis '...' or a user-defined string.

It accepts the following values.

  • clip - indicates to truncate the text at the limit of the content area.
  • ellipsis - indicates to display an ellipsis ('...', U+2026 HORIZONTAL ELLIPSIS) to represent clipped text.
  • string - displays custom string to represent clipped text. 

<!DOCTYPE html>
<html>
<head>
<style>
div {<!--  w  ww . j  av  a 2s. c o m-->
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden;              /* "overflow" value must be different from "visible" */ 
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>

</body>
</html>

The code above is rendered as follows: