以上需求比较常见，实现方法也有很多种，感觉用伪元素after实现挺好的，代码如下：

    <style type="text/css">
      .bg{
        width: 500px;
        height: 200px;
        background-color: gray;
        margin: 0 auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .valueCls{
        margin-right: 10px
      }
      .valueCls::after{
        content: '|';
        margin-left: 10px;
        color: red;
      }
    </style>

    <div class="bg">
      <span class="valueCls">风冷无霜</span>
      <span class="valueCls">智能可控</span>
      <span class="valueCls">一键启动</span>
      <span>超级省电</span>
    </div>

给除了最后一项外都设置一个伪元素。上面代码还进行了一行显示，如超出则显示省略号功能