질문

아래에 코드가 있습니다. 텍스트가 상자에 들어가는 한 완벽하게 작동합니다. 텍스트가 초과 되 자마자 상자를 고정 된 크기로 유지하는 대신 (CSS Grid 열에 따라) 분수 단위를 변경하여 상자 크기를 늘립니다.

이것을 변경하고 분수 단위를 변경하는 메소드가 있습니까?

시작하기 전에 이 예 에서 필드에 맞는 텍스트입니다. 페이지를 새로 고치면 (변경 될 때) 필드에 맞지 않는 텍스트이므로 상자의 크기를 변경하고 전체 레이아웃을 엉망으로 만드는 대신 끝에서 잘 려야합니다.

많은 감사합니다, 아래에 나열된 코드-관련 비트 만 포함하여 대부분이 생략 되었기 때문에 여기에서는 그다지 예쁘지 않습니다.

.guild{
    margin-bottom:2%;
    height:12%;
    width:98%;
    background-color:red; 
    border-radius:14px;
    display:grid;
    grid-template-columns: 0.05fr 1.5fr 5fr 2.5fr 0.2fr 2.8fr 2.8fr 0.2fr;
    grid-gap: 0.5%;
}

/* Code for column 2, 4, 6, 7 left out */
/* Colours Changed so you can clearly see. */

.guild_name_holder{
    grid-column: 3;
    margin-left:2.5%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.guild_name_tag{
    font-family: "Montserrat";
    font-size: 0.7vw;
    font-weight: 550;
    overflow: hidden;
    color: black;
}

.guild_name_box{
    background-color: white;
    margin-top:2%;
    height:35%;
    width:100%;
    border-radius:4px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.guild_name_box span{
    font-family: "Montserrat";
    font-size: 0.7vw;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: black;
    margin-left:3%;
    margin-right:3%;
}

<div class="guild">
  <div class="guild_pfp_holder">
    <div class="guild_pfp"></div>
  </div>
  <div class="guild_name_holder">
    <div class="guild_name_tag">Guild Name</div>
    <div class="guild_name_box">
      <span>Test Text</span>
    </div>
  </div>
  <!--- Code Left Out-->
</div>