CSS3之文本

作者: LemonnYan | 来源:发表于2018-05-10 22:23 被阅读1次

一、文本简介

复合属性font：font:font-style font-weight/line-height font-family

二、CSS3文本阴影属性

text-shadow属性的语法及参数

语法：text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y-offseet) 模糊半径(blur-radius)

参数值说明：

color：阴影颜色，定义绘制阴影时所使用的颜色，可以放在第一也可以放在最后。
x-offset：X轴位移，指定阴影水平位移量，可以取正负值。取正值，阴影在对象的右边；取负值，阴影在对象的左边。
y-offset：Y轴位移，指定阴影垂直方向偏移量，可以取正负值。取正值，阴影在对象的底部；取负值，阴影在对象的顶部。
blur-radius：阴影模糊半径，代表阴影向外模糊的范围。只能取正值，值为0时，表示不具有模糊效果。

示例代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css测试</title>
    <style>
    body{
        background-color:#665757;
    }
    .text-wrap{
        width:600px;
        margin:10px auto;
        padding:10px 0;
        border:5px solid #ccc;
        position: relative;
        box-shadow: 0 0 4px rgba(0,0,0,0.80);
        clear:both;
        font-family: 'Airal',serif;
        font-size:50px;
        text-align:center;
        color:#f7edf7;
    }
    .box1{
        text-shadow: 0px 0px 0 rgb(188,178,188),1px 0px 0 rgb(173,163,173),
                     2px 0px 0 rgb(157,147,157),3px 0px 0 rgb(142,132,142),
                     6px 0px 0 rgb(126,116,126),5px 0px 0 rgb(111,101,111),
                     6px 0px 0 rgb(95,85,95),7px 0px 0 rgb(79,69,79),
                     8px 0px 7px rgba(0,0,0,0.35),8px 0px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
    .box2{
        text-shadow: 0px 0px 0 rgb(188,178,188),1px -1px 0 rgb(173,163,173),
                     2px -2px 0 rgb(157,147,157),3px -3px 0 rgb(142,132,142),
                     6px -4px 0 rgb(126,116,126),5px -5px 0 rgb(111,101,111),
                     6px -6px 0 rgb(95,85,95),7px -7px 0 rgb(79,69,79),
                     8px -8px 7px rgba(0,0,0,0.35),8px -8px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
    .box3{
        text-shadow: 0px 0px 0 rgb(188,178,188),0px -1px 0 rgb(173,163,173),
                     0px -2px 0 rgb(157,147,157),0px -3px 0 rgb(142,132,142),
                     0px -4px 0 rgb(126,116,126),0px -5px 0 rgb(111,101,111),
                     0px -6px 0 rgb(95,85,95),0px -7px 0 rgb(79,69,79),
                     0px -8px 7px rgba(0,0,0,0.35),0px -8px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
     .box4{
        text-shadow: 0px 0px 0 rgb(188,178,188),-1px -1px 0 rgb(173,163,173),
                     -2px -2px 0 rgb(157,147,157),-3px -3px 0 rgb(142,132,142),
                     -6px -4px 0 rgb(126,116,126),-5px -5px 0 rgb(111,101,111),
                     -6px -6px 0 rgb(95,85,95),7px -7px 0 rgb(79,69,79),
                     -8px -8px 7px rgba(0,0,0,0.35),-8px -8px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
    .box5{
        text-shadow: 0px 0px 0 rgb(188,178,188),-1px 0px 0 rgb(173,163,173),
                     -2px 0px 0 rgb(157,147,157),-3px 0px 0 rgb(142,132,142),
                     -6px 0px 0 rgb(126,116,126),-5px 0px 0 rgb(111,101,111),
                     -6px 0px 0 rgb(95,85,95),-7px 0px 0 rgb(79,69,79),
                     -8px 0px 7px rgba(0,0,0,0.35),-8px 0px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
     .box6{
        text-shadow: 0px 0px 0 rgb(188,178,188),-1px 1px 0 rgb(173,163,173),
                     -2px 2px 0 rgb(157,147,157),-3px 3px 0 rgb(142,132,142),
                     -6px 4px 0 rgb(126,116,126),-5px 5px 0 rgb(111,101,111),
                     -6px 6px 0 rgb(95,85,95),-7px 7px 0 rgb(79,69,79),
                     -8px 8px 7px rgba(0,0,0,0.35),-8px 8px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
    .box7{
        text-shadow: 0px 0px 0 rgb(188,178,188),0px 1px 0 rgb(173,163,173),
                     0px 2px 0 rgb(157,147,157),0px 3px 0 rgb(142,132,142),
                     0px 4px 0 rgb(126,116,126),0px 5px 0 rgb(111,101,111),
                     0px 6px 0 rgb(95,85,95),0px 7px 0 rgb(79,69,79),
                     0px 8px 7px rgba(0,0,0,0.35),0px 8px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
    .box8{
        text-shadow: 0px 0px 0 rgb(188,178,188),1px 1px 0 rgb(173,163,173),
                     2px 2px 0 rgb(157,147,157),3px 3px 0 rgb(142,132,142),
                     4px 4px 0 rgb(126,116,126),5px 5px 0 rgb(111,101,111),
                     6px 6px 0 rgb(95,85,95),0px 7px 0 rgb(79,69,79),
                     8px 8px 7px rgba(0,0,0,0.35),8px 8px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
    .box9{
        text-shadow: 0px 0px 0 rgb(188,178,188),1px 0px 0 rgb(173,163,173),
                     2px 0px 0 rgb(157,147,157),3px 0px 0 rgb(142,132,142),
                     4px 0px 0 rgb(126,116,126),5px 0px 0 rgb(111,101,111),
                     6px 0px 0 rgb(95,85,95),0px 7px 0 rgb(79,69,79),
                     8px 0px 7px rgba(0,0,0,0.35),8px 0px 1px rgba(0,0,0,0.5),
                     0px 0px 7px rgba(0,0,0,0.2);
    }
    </style>
</head>
<body>
    <div class="text-wrap box1">测试1</div>
    <div class="text-wrap box2">测试2</div>
    <div class="text-wrap box3">测试3</div>
    <div class="text-wrap box4">测试4</div>
    <div class="text-wrap box5">测试5</div>
    <div class="text-wrap box6">测试6</div>
    <div class="text-wrap box7">测试7</div>
    <div class="text-wrap box8">测试8</div>
    <div class="text-wrap box9">测试9</div>
</body>
</html>

示例效果图：

三、CSS3溢出文本属性

语法：text-overflow:clip|ellipsis

属性值说明：

clip：不显示省略标记（...），只是简单的裁切；
ellipsis：文本溢出时显示省略号（...），省略标记插入的位置是最后一个字符。

text-overflow属性仅用于决定文本溢出时是否显示省略标记，并不具备样式定义的功能。要实现文本溢出时裁切显示省略标记效果，还需要两个属性的配合，强制文本在一行显示white-space:nowrap和溢出内容隐藏overflow:hidden，并且需要定义容器的宽度。

四、css3文本换行

1、word-wrap属性

使用word-wrap属性实现长单词与URL地址的自动换行。
语法：word-wrap:normal|break-word

属性值说明：

normal：默认值，浏览器只在半角空格或连字符的地方进行换行；
break-word：将内容在边界内换行（不截断英文单词换行）

注意：word-wrap用在<pre>和<table>中是没有效果的。

2、word-break属性

word-break属性用来设置对象内文本的字内换行行为，在出现多种语言的情况下尤为有用。
语法：word-break:normal|break-all|keep-all

属性值说明：

normal：默认值，根据语言自己的规则确定换行的方式，中文到边界换行，英文从整个单词换行。
break-all：可以强行截断英文单词，达到词内换行。
keep-all：不允许字断开。

提示：word-break取值为keep-all时，中文在不同的浏览器下显示风格各异，但英文都是一致的，长文本会撑破容器溢出显示。

3、white-space属性

white-space属性主要用来声明建立布局过程中如何处理元素中的空白符。

语法：white-space:normal || pre || nowrap || pre-line || pre-wrap || inherit

属性值说明：

normal：默认值，空白处会被浏览器忽略。
pre：保留输入的文本格式，类似于HTML中的<pre>标签效果。
nowrap：文本不会换行，文本会在同一行上，直到碰到换行标签<br/>为止。
pre-line：合并空白符序列，但保留换行符。
pre-wrap：保留空白符序列，正常进行换行。
inherit：继承父元素的white-space属性值。所有的浏览器都不支持该属性值。

4、文本换行技巧

pre标签自动换行

pre{
      white-space: pre;               /* Css 2.0*/
      white-space: pre-wrap;         /*Css 2.1*/
      white-space: pre-line;        /* Css 3.0*/
      white-space: -pre-wrap;      /*Opera4-6*/
      white-space: -o-pre-wrap;   /* Opera 7*/
      white-space: -moz-pre-wrap !important;  /* Mozilla*/
      word-wrap: break-word;      /*IE 5+*/
    }

单元格td自动换行

 table{
      table-layout: fixed;
      width:*** px;
    }
    table td{
      overflow: hidden;
      word-wrap: break-word;
    }

除pre、td标签外其它标签的自动换行

element{
      overflow: hidden;
      word-wrap: break-word;
    }

标签内容强制不换行

 element{
  white-space: nowrap;
  word-break: keep-all;
 }

网友评论

前端攻城狮

本文标题：CSS3之文本

本文链接：https://www.haomeiwen.com/subject/ttdgrftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

CSS3之文本

一、文本简介

二、CSS3文本阴影属性

text-shadow属性的语法及参数

三、CSS3溢出文本属性

四、css3文本换行

1、word-wrap属性

2、word-break属性

3、white-space属性

4、文本换行技巧

`pre`标签自动换行

单元格`td`自动换行

除`pre`、`td`标签外其它标签的自动换行

标签内容强制不换行

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端攻城狮

CSS3之文本

一、文本简介

二、CSS3文本阴影属性

text-shadow属性的语法及参数

三、CSS3溢出文本属性

四、css3文本换行

1、word-wrap属性

2、word-break属性

3、white-space属性

4、文本换行技巧

pre标签自动换行

单元格td自动换行

除pre、td标签外其它标签的自动换行

标签内容强制不换行

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端攻城狮

`pre`标签自动换行

单元格`td`自动换行

除`pre`、`td`标签外其它标签的自动换行