text-shadow

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css3文本</title>

<style type="text/css">

  * {

      margin: ;

      padding: ;

  }

  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;更节省页面空间。

css3--文字效果的更多相关文章

  1. 纯CSS3文字效果推荐

    之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的 ...

  2. 第95天：CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  3. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  4. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

  5. 小tip:CSS3下的渐变文字效果实现——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

  6. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

  7. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  8. css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

    这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...

  9. CSS3文字立体效果

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  10. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

随机推荐

  1. 系列（1） Note.Js的安装和部署

    一.检测电脑上是否安装node 首先确认下你的node是否已经安装并且配置到了环境变量中了,直接按下快捷键[win+R],调出运行框,然后在里面输入cmd,进入windows的命令窗口. 在命令窗口中 ...

  2. Java使用文件通道复制文件

    两种文件通道复制文件方式的性能比较 import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IO ...

  3. python使用qq邮箱向163邮箱发送邮件、附件

    在生成html测试报告后 import smtplib,time from email.mime.text import MIMEText from email.mime.multipart impo ...

  4. Java Web学习总结（9）学习总结-JSTL

    一,JSTL概述 JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能.jstl出现的目的同el一样也是要代替jsp页 ...

  5. 4412 GPIO初始化

    一.GPIO的初始化 • 在内核源码目录下使用命令“ls drivers/gpio/*.o”,可以看到“gpioexynos4”被编译进了内核.通过搜索*.o文件,可以知道内核编译内哪些文件.针对的看 ...

  6. 数据中 int 转 double 方式

    在mysql 中,得出一个int整数型数值 int整数值/int整数值   在被引用时,发现还是int类型 但是实际需要转换为 double 小数类型 查看相关函数,没有找到好的方法 后采用了 rou ...

  7. win7搭建局域网时间服务器

    近日,本人想在局域网内通过普通的windows 7 PC搭建一台NTP服务器,可看似简单的配置却给我捣腾了了半天.初期,参考了互联网的上相关的配置文档,可网络设备就是死活不同步NTP服务器的时间.实在 ...

  8. 神秘的java Https

    说起网络安全,最基本的策略就是走https.https仿佛一条神秘通道,有了它,万事无忧. 究竟什么是https?如何实现https? 本文将揭开https的神秘面纱. WTF https 万事皆有源 ...

  9. css如何让<a>标签，根据输入的内容长度调整宽度，宽度自适应，那位大仙帮帮忙

    css如何让<a>标签,根据输入的内容长度调整宽度,宽度自适应,那位大仙帮帮忙 5 样式 .ceshi{float:left; margin-left:13px; width:180px; ...

  10. Apache: No space left on device: Couldn’t create rewrite_map(XXXX)

    启动apache的时候 有时候会遇到这样的错误:No space left on device: Couldn’t create rewrite_map(XXXX) 第一眼看以为是磁盘没有空间了,其实 ...