css：列表效果（文字过长自适应）

效果

这种列表难点是文字过长需要居中自适应，据我所知解决办法有两种：

• 表格布局
• flex
  

代码

<div class="table">
	<table>
	  <tr class="rank-item"
	      v-for="(item, index) in studyRankList"
	      :key="index">
	    <td class="">
	      <div class="index" :class="'no-'+(index+1)">{{ index }}</div>
	    </td>
	    <td class="">
	      <div class="avatar">
	        <!-- <img :src="item.avatar" alt=""> -->
	        <img src="../assets/logo.png" alt="">
	      </div>
	    </td>
	    <td class="name">{{item.username}}</td>
	    <td class="score">平均成绩 {{item.score}} 分</td>
	  </tr>
	</table>
</div>

export default ({
  data () {
    return {
      active: 0,
      studyRankList: [
        {
          avatar: '../assets/logo.png',
          username: '张三李四王五张三李四王五张三李四王五张三李四王五',
          score: '2000000'
        },
        {
          avatar: '../assets/logo.png',
          username: 'zy',
          score: '200'
        },
        {
          avatar: '../assets/logo.png',
          username: 'zy',
          score: '2010'
        },
        {
          avatar: '../assets/logo.png',
          username: 'zy',
          score: '2010'
        }
      ]
    }
  }
})

.table {
  padding: 0 0.3rem;
}
.rank-item {
  display: block;
  font-size: 0.24rem;
  color: #666;
  border-bottom: 1px solid #d8d8d8;
  padding: 0.25rem 0rem;
  .score {
    width: 2.4rem;
    text-align: right;
  }
  .name{
    width: 3.5rem;
    font-size: 0.3rem;
    color: #666666;
    padding: 0 0.2rem;
  }
  .index {
    width: 0.48rem;
    height: 0.48rem;
    text-align: center;
    color: #7f4606;
    border-radius: 50%;
    line-height: 0.48rem;
    font-weight: bold;
  }
  .no-1 {
    background: #feb721;
  }
  .no-2 {
    background: #d0cfc2;
    color: #767676 !important;
  }
  .no-3 {
    background: #e3b77b;
  }
  .avatar {
    height: 0.8rem;
    width: 0.8rem;
    border: solid 0.01rem #979797;
    overflow: hidden;
    border-radius: 50%;
    margin-left: 0.4rem;
    img {
      width: 100%;
    }
  }
}

.score的text-align很关键