6 : Text Effects and Typographic Styles

Examples

  • Figure 6-3: Simple text-shadow.
  • Figure 6-4: Different axis offset values for text-shadow.
  • Figure 6-5: Different blur values for text-shadow.
  • Figure 6-6: Using multiple values with text-shadow.
  • Figure 6-7: The text-overflow property with a value of ellipsis.
  • Figure 6-8: Example of text with and without a break-word value for word-wrap.
  • Figure 6-9: The paragraph on the right has automatic hyphenation enabled.
  • Figure 6-10: A resizable text box has a striped handle in the lower-right corner.

Browser Support

Chrome Firefox Safari IE
text-shadow Yes Yes Yes IE10
text-overflow Yes Yes Yes Yes
text-align (new values) Yes Yes Yes No
text-align-last Yes Yes* No Yes
overflow-wrap Yes Yes Yes Yes
hyphens No Yes* Yes* IE10*
resize Yes§ Yes Yes§ No
  • * Requires vendor prefix.
  • † Without the start and end values.
  • ‡ As word-wrap.
  • § Not in mobile browsers.

A note on browser versions

Where a Yes is used in these support tables it means that the feature is supported either in an evergreen browser or in at least the last three versions of Safari (6–8) or IE (9–11). Otherwise, a version number will be shown. With regards to IE, it’s safe to presume that, with a very few exceptions, almost nothing in this book is implemented in IE8 or below.

For more complete version history I highly recommend the Can I use… compatibility tables.