- 省略
- 居中
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>