本文共 574 字，大约阅读时间需要 1 分钟。

  <div class="content pos-a w-100 bs">      <span class="ellipsis">Life</span>  </div>

css:	.content{   height:65px;line-height:65px;background:rgba(0,0,0,0.2); padding: 0px 10px 0 30px;bottom:2px;border-radius:0 0 10px 10px;transition:all 0.5s;   		 span{   color:#fff;font-size:24px;display: inline-block; vertical-align: top; width: auto;   max-width: 100%;}}.ellipsis{   text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%;}

width: auto; //禁止给宽，防止文字不够长，伪类元素下划线出来就铺满整行max-width: 100%; //因为文字已经设置了white-space:nowrap，文字不转行，也不会出现省略号，禁止文字超过当前内容的总宽度，这才会出现省略号的效果