文字超出省略、遮罩层

文本超时显示…

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行内容的时候

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //显示的行数

遮罩层样式：

position:fixed;
left:0;
top:0;
opacity:.5;
width:100%;
height:100%;
background:#000000a6;
z-index:998;
pointer-events:none; /*穿透操作*/

width height 百分比
当元素的height、width设置为百分比时，分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。

<div class="container">
   <div class="inner">注意这里</div>
   <div class="divider">我是分割线</div>
 </div>

 .container{
   width: 500px;
   height: 300px;
   border: 1px solid grey;
 }
 
 .inner{
   background: lightblue;
   text-align: center;
   width: 50%;
   height: 50%;
 }
 .divider{
   border-top: 1px solid lightblue;
   text-align: center;
 }