常用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>
上一篇:python之单例模式


下一篇:centos7安装rvm