页面优化

1.我们在进行页面切图是经常会遇到，容器的大小小于所放内容的大小：

如下图：

在一些购物网站中经常会遇到这种情况，展示每个产品的大小一样，但是产品的名称长短不一，这时就需要进行一些处理：

实现如下效果：

当鼠标移到方框上时，文字内容全部显示。

实现具体代码如下：

<style>
    .demo{
            margin: 20px;
            width: 100px;
            height: 20px;
            border: 1px solid #f00;
            background: #ddd;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        } 
<style>

<div class="demo" title="依恋旗下Teenie Weenie女装专场依恋旗下Teenie Weenie女装专场依恋旗下Teenie Weenie女装专场">
            依恋旗下Teenie Weenie女装专场依恋旗下Teenie Weenie女装专场依恋旗下Teenie Weenie女装专场
</div>