列表布局display:flex+列表左右两边有固定的图标+列表字体溢出使用省略号

效果：
未缩放时：

缩放时：

整体思路：使用ul和li标签，ul使用display:flex布局，li里面放文字和图标，当宽度足够时文字全部展示，宽度不够时溢出文字用…代替，图标不变。
1.文字溢出时使用…代替的实现方法：这三种样式缺一不可

最开始是把文字放在span标签里面了，但是发现无法实现…效果，如下，这样页面缩放时，li的宽度并不会随着缩放。

为了达到宽度不够时文字的…效果和图标不变的效果，使用了以下布局：文字部分直接放在li标签中，给li设置左右的padding,用来放i标签中的图标。


整体代码：

<template>
  <div>
      <ul class="content">
          <li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
          <li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
          <li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
          <li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
          <li>哈哈呵呵吼吼呵呵哒哒<i class="el-icon-close"></i></li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){

    }

}
</script>

<style scoped>
    .content{
        display: flex;
        border-bottom: 1px solid #666;
    }
    .content li{
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 5px 15px;
        position: relative;
        color: #666;
        border:1px solid #666;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
        margin-right: 5px;

    }
    .content li i{
        width: 15px;
        height: 15px;
        position: absolute;
        right: 0;
    }
</style>