僞類，僞元素和文字省略操做

時間 2019-11-18

標籤元素文字省略简体版

原文原文鏈接

1.僞類

僞類其實是元素的某種狀態。css

元素：hover:鼠標懸浮上去的狀態html

A:link:連接未點擊時候的狀態字體

A:visited：連接被瀏覽過的狀態spa

A:active：連接被點擊時候的狀態code

Input:focus 輸入框聚焦時候的狀態，即有光標的狀態。htm

2.僞元素

僞元素便是假的元素，經過元素內部創造假的元素，能夠創造2中假的元素，1個是在元素內部的最前面，一個是在內部的最後面blog

元素：before,在元素內部的前面建立一個假的子元素ip

元素：after，在元素內部的後面建立一個假的子元素it

注：無論有沒有元素都要寫（沒有元素時——content:""）io

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7 <meta charset="UTF-8">
 8 
 9 <title></title>
10 
11  
12 
13 <style type="text/css">
14 
15 .d1:before{
16 
17 content: "0";//無論有沒有元素都要寫（沒有元素時——content:""）
18 
19 display: block;
20 
21 width: 100px;
22 
23 height: 100px;
24 
25 background: skyblue;
26 
27 }
28 
29  
30 
31 .d1:after{
32 
33 content: "4";
34 
35 display: block;
36 
37 width: 100px;
38 
39 height: 100px;
40 
41 background: skyblue;
42 
43 }
44 
45 </style>
46 
47 </head>
48 
49 <body>
50 
51 <!--僞元素before-->
52 
53 <div class="d1">
54 
55 <div class="child">1</div>
56 
57 <div class="child">2</div>
58 
59 <div class="child">3</div>
60 
61 </div>
62 
63 </body>
64 
65 </html>

聊天框案例：

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head>
  6 
  7 <meta charset="UTF-8">
  8 
  9 <title></title>
 10 
 11 <style type="text/css">
 12 
 13 .main{
 14 
 15 width: 800px;
 16 
 17 margin: 0 auto;
 18 
 19 }
 20 
 21 .ltk{
 22 
 23 width:600px ;
 24 
 25 height: 80px;
 26 
 27 background: skyblue;
 28 
 29 color:#fff;
 30 
 31 line-height: 80px;
 32 
 33 padding: 0 20px;
 34 
 35 margin: 10px auto;
 36 
 37 border-radius: 20px;
 38 
 39 position: relative;
 40 
 41 }
 42 
 43  
 44 
 45 .ltk:before{
 46 
 47 /*content必需要寫*/
 48 
 49 content: "";
 50 
 51 display: block;
 52 
 53 width: 0;
 54 
 55 height: 0;
 56 
 57 border-top:10px solid transparent ;
 58 
 59 border-left:15px solid transparent ;
 60 
 61 border-right:15px solid skyblue ;
 62 
 63 border-bottom:10px solid transparent ;
 64 
 65 position: absolute;
 66 
 67  
 68 
 69 left: -30px;
 70 
 71 top: 20px;
 72 
 73 }
 74 
 75 </style>
 76 
 77 </head>
 78 
 79 <body>
 80 
 81 <div class="main">
 82 
 83 <div class="ltk">
 84 
 85 今晚看電影？
 86 
 87 </div>
 88 
 89  
 90 
 91 <div class="ltk">
 92 
 93 記得帶身份證？
 94 
 95 </div>
 96 
 97 </div>
 98 
 99 </body>
100 
101 </html>

3.當字體超出容器時操做

3步：

/*溢出隱藏*/
overflow: hidden;

/*不換行*/
white-space: nowrap;

/*文字超出以後顯示的樣式*/
text-overflow: ellipsis;（...——>意爲後面多餘文字省略）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。