<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>


<div id="app" class="min-h-screen">
  <main class="flex place-content-center gap-16px mt-10vh">
    <!-- 创建一份一模一样的文本，让外层容器（A）宽度由内部文本决定，然后将容器盒子（B）的宽度设置成和（A）一样 -->
    <!-- 通过这样完成容器查询 -->
    <div class="avator" v-for="(item, index) in arr" :key="index">

      <!-- 外层容器的文本通过伪元素生成，文字会把avator-inner::before撑开 -->
      <div class="avator-inner" :alt="item">
        <div class="avator-container">
          <span>{{item}}</span>
        </div>
      </div>
    </div>
  </main>
</div>

.avator {
  /* flex居中 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 宽高 */
  width: 50px;
  height: 50px;

  /* 圆角颜色 */
  border-radius: 8px;
  background: #eaeaea;

  /* 别换行 */
  white-space: nowrap;
}

.avator-inner {
  position: relative;
}

.avator-inner::before {
  content: attr(alt);
  visibility: hidden;
  font-size: 40px;
}

/* 利用定位，将这个盒子设置的和外面的.avator-inner设置成一样大 */
/* 也就是avator-inner::before由文字撑开，avator-inner和自己的before一样大，avator-container利用定位和avator-inner一样大 */
.avator-container {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avator-container span {
  /* 用cqw做到与宽度成反比，也就是文字越多，avator-inner的before越大，这里的font-size也就越小 */
  font-size: calc(24px - 10cqw);
  /* 因为avator-container是定位在中间的，所以和边界没有距离，这加padding写与边界的距离 */
  display: inline-block;
  padding: 0 2px;

  overflow: hidden;
  max-width: 40px;
  text-overflow: ellipsis;
}

const vm = new Vue({
  el: "#app",
  data() {
    return {
      arr: [
        "我",
        "名字",
        "三个字",
        "有四个字",
        "A",
        "AB",
        "ABC",
        "ABCD",
        "English"
      ]
    };
  }
});