CSS3 text effects


CSS3 contains several new text features.

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

  • text-shadow

  • box -shadow

  • text-overflow

  • word-wrap

  • ##word-break

Browser supports

CSS3 text-shadow

In CSS3, text-shadow attribute Applies to text shadow.

Text shadow effect!

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


Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1
{
	text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>

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

<p><b>注意:</b> Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.</p>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance


# #CSS3 box-shadow property

The CSS3 box-shadow property in CSS3 is applicable to box shadow

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Run Example»
Click the "Run Example" button to view the online example


Next add color to the shadow

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px grey;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Run Instance»
Click the "Run Instance" button to view the online instance

Next add a blur effect to the shadow

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Run Example»
Click the "Run Example" button to view the online example

You can also add shadow effects to the two pseudo-elements::before and ::after


Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#boxshadow {
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

/* Make the image fit the box */
#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}
</style>
</head>
<body>

<div id="boxshadow">
  <img src="rock600x400.jpg" alt="Norway" width="600" height="400">
</div>

</body>
</html>

Run Instance»
Click the "Run Instance" button to view online Example


A special case of using shadows is the card effect


Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}
</style>
</head>
<body>

<h2>卡片</h2>

<p>box-shadow 属性用来可以创建纸质样式卡片:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

</body>
</html>

Text Card
Click the "Run Example" button to view the online example


Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h2> 卡片</h2>

<p>box-shadow属性可以用来创建纸质样式卡片:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>

Run instance»
Click the "Run instance" button to view the online instance

CSS3 Text Overflow property

CSS3 text overflow property specifies how overflow content should be displayed to the user

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div.test
{
	white-space:nowrap; 
	width:12em; 
	overflow:hidden; 
	border:1px solid #000000;
}
</style>
</head>
<body>

<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

CSS3 line wrapping

If a word is too long and does not fit in a region , which expands outside:

In CSS3, the wrap property allows you to force text to wrap - even if that means splitting it a word in the middle:

The CSS code is as follows:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
p.test
{
	width:11em; 
	border:1px solid #000000;
	word-wrap:break-word;
}
</style>
</head>
<body>

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

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

CSS3 Word Breaking

CSS3 Word Breaking property specifies line breaking rules:

CSS code is as follows:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
p.test1
{
	width:9em; 
	border:1px solid #000000;
	word-break:keep-all;
}

p.test2
{
	width:9em; 
	border:1px solid #000000;
	word-break:break-all;
}
</style>
</head>
<body>

<p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p>

<p><b>注意:</b>  word-break 属性不兼容 Opera.</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

##PropertiesDescriptionCSShanging-punctuationSpecifies whether punctuation characters are outside the wireframe. 3punctuation-trimSpecifies whether to trim punctuation characters. 3text-align-lastSet how to align the last line or the line immediately before a forced newline. 3text-emphasisApplies an emphasis mark and the emphasis mark's foreground color to the element's text. 3text-justifySpecifies the alignment method used when text-align is set to "justify". 3text-outlineSpecifies the outline of the text. 3text-overflowSpecifies what happens when text overflows the containing element. 3text-shadowAdds a shadow to text. 3text-wrapSpecifies the line wrapping rules for text. 3word-breakSpecifies the line breaking rules for non-Chinese, Japanese and Korean text. 3word-wrapAllows long indivisible words to be split and wrapped to the next line. 3
←
→

php.cn

HomeHomeCourseCourseArticleArticleQ&AQ&ADictionaryDictionaryManualManualDownloadDownloadsearchsearchAPPDownload APPDownload