常用html设置：

• 省略
• 居中

1. 省略 ellipsis：　　

　　text-overflow:ellipsis；

       要求容器必须是固定的，要不然无法做省略。

       table的省略

table{
 table_layout:fixed;  //默认是auto即根据内容大小自动扩充
}
table tr td，table tr th{
      white-space:nowrap;  // 不允许折行
      overflow:hidden;
      text-overflow:ellipsis;  
}

       div的省略

div{
   width:50px;
   text-overflow:ellipsis;
   overflow:hidden;
}

2.居中：

.div{
　　display:flex;
　　align-items:center;
}

   flex为html5内容，低版本ie不支持。

可使用下面table属性代替居中：

.cell{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}

 .table{
    display: table;
    width:100%;
    height:80px;
 }
<div class="table">
    <div class="cell">1</div>
</div>

 

 还可用line-height:

.cell{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}

 .table{
    display: inline-table;
    width:60%;
    height:80px;
    line-height:80px;
 }

</style>
<div class="table">
    <div class="cell">1</div>
</div>

 

 还可用margin-top：

这种需要知道父元素的高度和子元素的高度。margin-top = 父元素高度/2 - 子元素高度/2

.cell{
    width:30px;
    height:20px;
    background-color: #33f65c;
    margin: auto;
    margin-top:30px;
}

 .table{
    display: block;
    width:60%;
    height:80px;
    text-align:center;
    background-color: #d3f3ac;
    overflow:hidden;
 }

<div class="table">
    <div class="cell">1</div>
</div>

 

转载于:https://www.cnblogs.com/DennyZhao/p/8418915.html