CSS3 文本效果

2018-01-13 15:59 更新

CSS3引入了幾個新的文本屬性，我們可以使用文本樣式。


CSS3文本陰影

在CSS3中，我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本。

text-shadow 接受以逗號分隔的陰影列表應(yīng)用于文本。


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 10px 10px 10px #CCC;
}
</style>
</head>
<body>

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

</body>
</html>

上面的代碼呈現(xiàn)如下：

文本陰影

CSS3自動換行

在CSS3中，我們可以使用 word-wrap 屬性強(qiáng)制文本換行在一個單詞的中間。


它的可能值是

  • normal - 在正常單詞斷點處中斷。
  • break-word - 必要時中斷工作。

<!DOCTYPE html>
<html>
<head>
<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: 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>

上面的代碼呈現(xiàn)如下：

CSS3自動換行

CSS3文本溢出

CSS3中的 text-overflow 屬性確定如何向用戶發(fā)信號通知溢出的內(nèi)容。

它可以被剪裁，或顯示省略號“...”或用戶定義的字符串。

它接受以下值。

  • clip - 指示在內(nèi)容區(qū)域的限制處截斷文本。
  • ellipsis - 表示顯示省略號（'...'，U + 2026 HORIZONTAL ELLIPSIS）以表示剪切的文本。
  • string - 顯示自定義字符串以表示剪切文本。 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  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>

上面的代碼呈現(xiàn)如下：

CSS3文本溢出

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號