css常用样式对文本的处理演练

2020-02-14 16:00:46来源:博客园 阅读 ()

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

css常用样式对文本的处理演练

CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距,direction改变文本从左至右的阅读顺序,white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐,至于我们常看到的产品介绍中的省略号“...”如何实现以及文字如何贴图对齐,尽在下面代码详情中一一介绍。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>css常用样式对文本的处理演练</title>
 7     <style type="text/css">
 8     div#box{
 9         letter-spacing: 2px;/*字符间距*/
10         text-indent: 2em;/*首行缩进2字符*/
11         width: 300px;/*容器宽度*/
12         height: 200px;/*容器高度*/
13         color: #000;/*文本颜色*/
14         background-color:rgb(255,0,0);/*容器背景色*/
15     }
16     p{
17         word-spacing: 5px;/*文字间距*/
18         direction: rtl;/*文本方向*//*默认文本方向从左至右ltr,left to right*/
19         white-space:normal;/*处理空白符*/
20         /*通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:
21         它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:*/
22     }
23     /*文本修饰*/
24     p.text{
25         text-decoration: underline;
26         text-decoration: overline;
27         text-decoration: none;
28         text-transform: uppercase;/*全部大写*/
29         text-transform: lowercase;/*全部小写*/
30         text-transform: capitalize;/*首字母大写*/
31     }
32     /*文本对齐方式*/
33     div{
34         text-align: left; /*文本居左*/
35         text-align: right; /*文本居左*/
36         text-align: center; /*文本居中*/
37         text-align: justify;/*两端对齐*/
38     }
39     /* 问题:我们通常看到的类似这样的http://www.mi.com/seckill 商品介绍中的省略号...如何实现? */
40     div#box{
41         width: 400px;
42         height: 50px;
43         white-space: nowrap;/*文本不换行*/
44         overflow: hidden;/*文本穿出隐藏*/
45         text-overflow: ellipsis;/*省略号*/
46         line-height: 50px;/*文本垂直对齐*/
47     }
48     /* 问题:当插入图片,如何让文本与图片顶对齐围绕 */
49     img{
50         width: 200px;
51         float: left;
52         vertical-align: bottom;/*文本垂直 middle  top bottom */
53     }
54     div>p{
55         float: left;/*文本贴图对齐*/
56     }
57     </style>
58 </head>
59 <body>
60     <div id="box">撩人情话:1.我并非言辞夸张或虚情假意。我觉得,这个世界已经待我极好。从前我也不曾这么认为。直到,我在芸芸众生之中遇见你。遇见一道光,让我此生再无遗憾,再不畏惧。2.我是个固执的人,从不愿挪动原则半分,
61     可你来了之后,我的原则就成了你。3.喜欢一个人是藏不住的,即使嘴巴不说,也会从眼睛里跑出来。我喜欢你,认真且怂,从一而终。</div>
62     <p class="text">I'm a stubborn person. I never want to move half of the principles, but after you come, my principles become you.</p>
63     <div class="pic">
64         <img src="https://i-beta.cnblogs.com/assets/adminlogo.gif" alt="">我是个固执的人,从不愿挪动原则半分,可你来了之后,我的原则就成了你。
65     </div>
66 </body>
67 </html>

原文链接:https://www.cnblogs.com/dhnblog/p/12310291.html
如有疑问请与原作者联系

标签:POSTimgemClassIESpan

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css常用样式font控制字体的多种变换

下一篇:css如何玩转a链接状态和改变列表样式