5、CSS设置单行文字溢出部分省略号代替

版权声明：个人学习小总结 喜欢前端的同学可以加我qq512998324互相交流学习 https://blog.csdn.net/luckybuling/article/details/85113902

 

.userName{
  display: inline-block;
  max-width: 69%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
 }

<p> 
    <span class="userName">用户名称1</span>
    <span style="font-size:.22rem;padding-left:.02rem">
        (第<span class="awarded"></span>名)
    </span>

</p>