固定高度文字垂直居中显示以及闭包和面向对象的运用

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 <title>Examples</title>
  7 <meta name="description" content="">
  8 <meta name="keywords" content="">
  9 <link href="" rel="stylesheet">
 10 <style>
 11    *{margin:0;padding:0;}
 12    body{font-size: 16px;}
 13    .ovh{overflow: hidden;}
 14    .ovh2{overflow: hidden;width: 198px;height: 42px;text-overflow:ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2; display: -webkit-box;line-height: 20px;}
 15     .ovh .height{float: left;}
 16    .height{width:200px;height: 62px;padding:10px;border:1px solid #fe0;display: table;overflow: hidden;margin-top: 20px;margin-bottom: 20px;float: left;margin-right: 20px;}
 17    .height .cont{display: table-cell;border:1px solid #f00;vertical-align: middle;word-break:break-all;line-height: 20px;height: 20px;overflow: hidden;}
 18 
 19    .inline_box{font-size: 0;width: 200px;height: 62px;padding:10px;border:1px solid #fe0;overflow: hidden;margin-top: 20px;margin-bottom: 20px;float: left;margin-right: 20px;}
 20    .inline_box .inline{display: inline-block;line-height: 20px;vertical-align: middle;color: #000;font-size: 16px;border:1px solid #f00;word-break:break-all;}
 21    br{overflow: hidden;height: 0;width: 0;clear:both;display: block;}
 22    .inline_box .inline_block{display: inline-block;width:0;height: 100%;vertical-align: middle;}
 23    .box{width:200px;height: 62px;padding:10px;border:1px solid #fe0;display:-webkit-box;display:-webkit-flex;display: -ms-flexbox;display:flex;overflow: hidden;margin-top: 20px;margin-bottom: 20px;float: left;margin-right: 20px;-webkit-align-items:center;align-items:center;}
 24    .box2{width:200px;padding:10px;border:1px solid #fe0;display:-webkit-box;display:-webkit-flex;display: -ms-flexbox;display:flex;margin-top: 20px;margin-bottom: 20px;float: left;margin-right: 20px;-webkit-align-items:center;align-items:center;}
 25    .box .cont,.box2 .cont{border:1px solid #f00;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;line-height: 20px;word-break:break-all;}
 26 </style>
 27 </head>
 28 <body>
 29 <h1>固定高度文字垂直居中显示</h1>
 30 <h2>vertical-align:middle  实现方式</h2>
 31 <div class="inline_box">
 32       <span class="inline_block"></span><p class="inline">义为了内联元素，</p>
 33 </div>
 34 <div class="inline_box">
 35       <span class="inline_block"></span><p class="inline">义为了内联元素，使用margin:0px auto居中是无效</p>
 36 </div>
 37 <div class="inline_box">
 38       <p class="inline">义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能</p>
 39 </div>
 40 <br/>
 41 <h2>display:table; 实现方式</h2>
 42 <h3>未实现超出两行显示隐藏的效果：</h3>
 43 <div class="ovh">
 44    <div class="height">
 45          <div class="cont">
 46             义为了内联元素       
 47          </div>
 48     </div>
 49    <div class="height">
 50          <div class="cont">
 51             义为了内联元素，使用margin:0px auto居中是无效       
 52          </div>
 53     </div>
 54    <div class="height">
 55          <div class="cont">
 56             义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能       
 57          </div>
 58     </div>
 59     <div class="height">
 60          <div class="cont">义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器</div>
 61     </div>
 62 </div> <br/>
 63 <h3>超出两行显示隐藏的效果：</h3>
 64 <div class="ovh">
 65    <div class="height">
 66          <p class="cont">义为了内联元素</p>
 67     </div>
 68    <div class="height">
 69          <p class="cont">义为了内联元素，使用margin:0px auto居中是无效</p>
 70     </div>
 71    <div class="height">
 72          <div class="cont">
 73             <p class="ovh2">义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能</p>       
 74          </div>
 75     </div>
 76 </div> <br>
 77    
 78 <h2>flexBox 实现方式</h2>
 79    <div class="box">
 80          <p class="cont">义为了内联元素，</p>
 81    </div>
 82       <div class="box">
 83          <p class="cont">义为了内联元素，使用margin:0px auto居中是无效</p>
 84    </div>
 85       <div class="box">
 86          <p class="cont">义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能</p>
 87    </div>
 88       <div class="box2">
 89          <p class="cont">义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能</p>
 90    </div>
 91 <script>
 92    function Person(){    
 93     var name = "default";       
 94        
 95     return {    
 96        getName : function(){    
 97            return name;    
 98        },    
 99        setName : function(newName){    
100            name = newName;    
101        }    
102     }    
103 };    
104   Person.prototype.getName2 = function(){
105    return (this.getName())
106 }   
107      
108 var john = Person();    
109 console.log(john.getName());    //default
110 john.setName("john");    
111 console.log(john.getName());    //john
112      
113 var jack = Person();    
114 console.log(jack.getName());    //default
115 jack.setName("jack");    
116 console.log(jack.getName());   //jack
117 console.log('***********************'); 
118 var rose = new Person();    
119 console.log(rose.getName());    //default
120 rose.setName("rose");    
121 console.log(rose.getName());   //rose
122 console.log(rose);   //Object {}
123 
124 
125 console.log('-----------------------'); 
126 var Human = function(){
127    this.name = "default";
128 }
129 Human.prototype.setName = function(name){
130    this.name = name;
131 }
132 Human.prototype.getName = function(){
133    return this.name;
134 }
135 var john = new Human();
136 console.log(john.getName());  //default  
137 john.setName("john");    
138 console.log(john.getName());  //john  
139 
140 var jack = new Human();
141 console.log(jack.getName());  //default  
142 jack.setName("jack");    
143 console.log(jack.getName());  //jack
144 console.log(jack);    //Human {name: "jack"}
145 </script>
146 </body>
147 </html>
posted on 2016-03-17 17:03 Tadini 阅读(163) 评论(0) 编辑收藏举报