1.正方形圖片：有時候前端獲取到的圖片大小不一樣，固定寬高會變形，不固定寬高排版又會亂顿肺，所以要求圖片不變形的情況下正方形展示遮晚，這樣也不影響排版
代碼如下：
<div>
<div class="image-wrapper">
<img src="/assets/img/bg-middle.jpg">
</div>
</div>
.image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.image-wrapper img {
position: absolute;
width: 100%;
height: 100%;
}
2.文字溢出時省略號代替：在一些固定寬的塊中因為物品名稱太長又必須一行顯示時可以用到性昭，將超出塊的部分隱藏并用省略號代替
代碼如下
<span class="test-span">測試測試測試測試測試測試測試測試測試</span>
.test-span{
width:100px;
display: inline-block;
border: 1px solid red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
要實(shí)現(xiàn)溢出時產(chǎn)生省略號的效果
1、容器寬度：width县遣；value;(px糜颠、%，都可以)
2萧求、強(qiáng)制文本在一行內(nèi)顯示：white-space:nowrap;
3其兴、溢出內(nèi)容為隱藏：overflow:hidden;
4、溢出文本顯示省略號：text-overflow:ellipsis;
效果：
image.png
