H5 自适应正方形图片与文字溢出产生省略号

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;

    }

要实现溢出时产生省略号的效果

1、容器宽度：width；value;(px、%，都可以)

2、强制文本在一行内显示：white-space:nowrap;

3、溢出内容为隐藏：overflow:hidden;

4、溢出文本显示省略号：text-overflow:ellipsis;

效果：

image.png