css/17.texteffects_code.html at main · Biswajit6844/css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title>
      text effects
    </title>
    <style>
      .bluebox{
        background-color: #3A5795;
		color: white;
		height: 100px;
		width:auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	  }
	  .bluebox:hover{
		overflow: visible;
	  }
	  .yellowbox{
		background-color: rgb(222, 224, 85);
		height: 100px;
        width: 400px;
		/*        word-break: break-all;
		*/
		/*        word-break: keep-all;
		*/
		/*        word-wrap: break-word;
		*/
		overflow: hidden;
	  }
	  .greenbox{
		background-color: #31af37;
		height: 100px;
		width: auto;
	  }
	  .great{
		background-color: #5a3479;
    }
</style>
</head>

<body>
<div class="bluebox">
  Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook
  Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook
  Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook
  Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook
  Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook
  Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook Facebook
</div>
<div class="yellowbox">
  <p>
    Apple Apple Apple Apple Apple Apple LoooooooooongApple Apple Apple Apple Apple Apple Apple Apple Apple Apple
    Apple Apple Apple Apple Apple Apple Apple LoooooooooooooooooooooooooooooooooooooooooooooooooooongApple Apple
    Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple
  </p>

</div>
<div class="greenbox">
  <p>
    Microsoft.
  </p>

</div>
</body>


</html>