css經常使用樣式對文本的處理演練

時間 2020-02-15

標籤 css 經常使用樣式文本處理演練欄目 CSS 简体版

原文原文鏈接

CSS文本屬性可定義文本的外觀，這是毫無疑問的，其次css能夠經過如下屬性改變文字的排版，比方說letter-spacing實現字符間距text-indent: 2em;完成首行縮進2字符word-spacing改變了文字的間距，direction改變文本從左至右的閱讀順序，white-space處理字符間空白text-transform實現文字大小寫text-align改變文字排版對齊，至於咱們常看到的產品介紹中的省略號「...」如何實現以及文字如何貼圖對齊，盡在下面代碼詳情中一一介紹。css

 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>