css - 包含文本的 Div 调整大小，尽管 box-sizing 边框框

Question

我有 4 个水平按钮，相对于应用程序的其余部分，它们需要保持固定大小。

为此，我使用以下语法在我的所有 CSS 上使用 -webkit-box-sizing:border-box 和 box-sizing:border-box：

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

尽管如此，当在按钮中输入文本时，它们会垂直增长并扭曲我的按钮布局。

奇怪的是我同时遇到了相反的问题。我的按钮中的文本不断变化，几个月来我一直未能找到一种方法来动态调整我的文本大小以适应我的按钮的水平约束而不会溢出。

然而，即使使用框大小，按钮也会垂直调整大小以为文本腾出空间。

如何在不调整按钮大小的情况下将文本垂直和水平地保留在按钮内？Clamp 对我来说不是一个选项，因为按钮中的文本有时会很长，有时会很短。所以任何涉及幻数的东西都行不通。

代码笔： https ://codepen.io/TheNomadicAspie/pen/YzVvYjL

<div id="bottom_bar" class="bottom-bar">
  <div id="character" class="character">
    <img id="character_image" src="https://i.imgur.com/MdgNp7v.png">
  </div>
  <div id="bottom_display" class="bottom-display">
    <div id="answers_display" class="answers-display">
      <div id="answer_container_1" class="answer-button-1">
        <div id="answer_checkbox_1" class="checkbox">
        </div>
        <div id="answer_button_container_1" class="answer-button-container">
          <button id="answer_button_1" class="button lower-button">
            <div id="answer_button_1_text"></div>
          </button>
        </div>
      </div>
      <div id="answer_container_2" class="answer-button-2">
        <div id="answer_checkbox_2" class="checkbox">
        </div>
        <div id="answer_button_container_2" class="answer-button-container">
          <button id="answer_button_2" class="button lower-button">
          </button>
        </div>
      </div>
      <div id="answer_container_3" class="answer-button-3">
        <div id="answer_checkbox_3" class="checkbox">
        </div>
        <div id="answer_button_container_3" class="answer-button-container">
          <button id="answer_button_3" class="button lower-button">
          </button>
        </div>
      </div>
      <div id="answer_container_4" class="answer-button-4">
        <div id="answer_checkbox_4" class="checkbox">
        </div>
        <div id="answer_button_container_4" class="answer-button-container">
          <button id="answer_button_4" class="button lower-button">
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

* {
  outline: none;
  opacity: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  position: fixed;
  height: 100%;
  background-color: #26004b;
  font-size: 2vh;
  margin: 0 auto;
  font-family: open_sans;
}

.bottom-bar {
  display: grid;
  grid-template-columns: 38.2% 61.8%;
  position: relative;
  height: 38.2%;
  width: 100vw;
  bottom: 0%;
}

.character {
  grid-column: 1/2;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
}

.character img {
  position: absolute;
  max-height: 100%;
  bottom: 0%;
  left: 0%;
}

.bottom-display {
  grid-column: 2/3;
  position: relative;
  height: 100%;
  padding-right: 5vw;
  padding-top: 1%;
  padding-bottom: 3%;
}

.answers-display {
  display: grid;
  gap: 1%;
  height: 99%;
  max-height: 99%;
  grid-template-columns: repeat(
    auto-fill,
    minmax(clamp(28vw, 45vmin, 35vw), 1fr)
  );
  grid-template-rows: 25% 25% 25% 25%;
  height: 100%;
}

.answer-button-1 {
  position: relative;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 98%;
}

.answer-button-2 {
  position: relative;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 98%;
}

.answer-button-3 {
  position: relative;
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 99%;
}

.answer-button-4 {
  position: relative;
  grid-row: 4/5;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 99%;
}

.answer-button-container {
  grid-column: 2/3;
  padding-left: 5%;
  height: 100%;
}

.answer-button-container button {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.button {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: black; /*Button Color*/
  color: #f5f5f5;
  font-family: open_sans;
  font-size: 1.5rem;
  font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0.1em 0.2em black;
}

.lower-button {
  white-space: nowrap;
}

.active {
  transition: 0.1s;
  box-shadow: 0.01em 0.02em black;
  transform: translate(0.05em, 0.1em);
}

.button:active {
  transition: 0.1s;
  box-shadow: 0.01em 0.02em black;
  transform: translate(0.05em, 0.1em);
}

.button:focus .button:hover {
  box-shadow: 0.06em 0.12em black;
  transform: translate(-0.01em, -0.02em);
}

answer_button_1.innerText = 'Test test test test'

标签： css