css3--文字效果

最新推荐文章于 2023-10-29 22:23:49 发布

weixin_33830216

最新推荐文章于 2023-10-29 22:23:49 发布

阅读量89

点赞数

原文链接：http://www.cnblogs.com/qjuly/p/9028213.html

版权

text-shadow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3文本</title>  
<style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }

  h1 {
      text-shadow: 5px 5px 5px red; /*x轴,y轴,模糊程度,颜色*/
  }
</style>
</head>
<body>
  <h1>Marvel Comics</h1>
</body>
</html>

效果如下：

CSS3文本溢出属性指定应向用户如何显示溢出内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3文本效果</title>  
<style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }

  div.test {
      width: 12em;
      white-space: nowrap; /*文本显示在一行*/
      overflow: hidden;    /*超出文本的区域隐藏掉*/
      border: 1px solid #000;
  }
</style>
</head>
<body>
  <div class="test" style="text-overflow: ellipsis;">
    This is some long text that will not fit in the box
  </div>

  <div class="test">
    This is some long text that will fit in the box
  </div>

  <div class="test" style="text-overflow: '>>'">
    This is some long text that will fit in the box
  </div>
</body>
</html>

效果如下：

clip：默认

ellipsis:文本溢出显示省略号

text-overflow: '>>'：只在火狐浏览器下有效

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3文本效果</title>  
<style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }

  .test {
      width: 11em;
      border: 1px solid #000;
      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>

效果如下：

没加换行之前效果如下：

CSS3 单词拆分换行属性指定换行规则：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文本效果</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>

效果如下：

word-wrap的break-word是沿用浏览器默认的换行方式，因此“Ooops too”后面空出了一段空白，右图word-break的break-all是改变浏览器默认的换行方式，让浏览器无视半角空格，直接根据容器尺寸换行，因此遇到长单词时，直接断词换行。效果上看 word-break: break-all;比 word-wrap: break-word;更节省页面空间。

转载于:https://www.cnblogs.com/qjuly/p/9028213.html