时间戳

首页 > 解决方案 > CSS Grid分数单位根据内容而变化？

html - CSS Grid分数单位根据内容而变化？

问题描述

我有下面列出的代码。只要文本适合该框，它就可以很好地工作。一旦文本超过，而不是保持框的固定大小（根据 CSS 网格列），它会更改分数单位，增加框的大小。

有什么办法可以改变这一点并改变分数单位？

在此示例中，我开始之前是适合该字段的文本。一旦我刷新页面（当它改变时），那是不适合该字段的文本，因此应该在最后切断而不是改变框的大小并弄乱整个布局。

非常感谢，下面列出的代码 - 这里的代码不是很漂亮，因为大多数都被遗漏了，只是包括了相关的部分。

.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>

标签： htmlcsscss-grid

解决方案

从已删除的先前答案中解决 - 以 rem 而不是 % 设置宽度。

推荐阅读