如何使 CSS 长栏文本加宽网格而不是溢出？

Question

我目前正在重构我的一个 Firefox 插件，我注意到其中一个翻译出现了一个问题：我有一个标签开关，它是一个有 2 列的 CSS 网格，两者都是宽度为 50%。使用较短的标签标题，一切都按预期工作，但较长的标题会溢出。

相反，我想要更长的标题来加宽它们各自的列。 tab-button 的宽度应相同，tab-button-container 的宽度应为 fit-content。虽然可以为 tab-button-container 宽度设置一个适当的绝对值，但我不想不必要地浪费任何屏幕 space.

你能帮帮我吗？谢谢！

html {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
  width: max-content;
  height: fit-content;
  font-size: 14px;
}

body {
  overflow: hidden;
  font-family: sans-serif;
  margin: 0px;
  height: fit-content;
  width: max-content;
  border: none;
}

main {
  padding-left: 20px;
  padding-right: 20px;
  width: max-content;
}

.tab-button-container {
  grid-template-columns: repeat(2, calc(50% - 2px));
  padding: 4px;
  column-gap: 4px;
  width: calc(100% - 4px);
  min-width: max-content;
  display: grid;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
  cursor: default;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab-button {
  white-space: nowrap;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.tab-button--active {
  background-color: #0a84ff;
  color: white;
}

.tab-button--inactive {
  background-color: transparent;
  color: #676767;
  transition: 0.3s;
}

.tab-button--inactive:hover {
  background-color: rgb(200, 200, 200);
  transition: 0.3s;
}

<html>
  <body>
    <main>
      <div class="tab-button-container">
        <span class="tab-button tab-button-encrypt tab-button--active">
          <i class="fas fa-lock"></i>
          <a class="tab-button-label">Salataan</a>
        </span>

        <span class="tab-button tab-button-decrypt tab-button--inactive">
          <a class="tab-button-label">Salaus puretaan loremipsum</a>
        </span>
      </div>
    </main>
  </body>
</html>

Answer 1

溢出问题是由于.tab-button-container { grid-template-columns: repeat(2, calc(50% - 2px)); }的宽度有限引起的。您需要更改列宽以适合内容：

html {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
  width: max-content;
  height: fit-content;
  font-size: 14px;
}

body {
  overflow: hidden;
  font-family: sans-serif;
  margin: 0px;
  height: fit-content;
  width: max-content;
  border: none;
}

main {
  padding-left: 20px;
  padding-right: 20px;
  width: max-content;
}

.tab-button-container {
  grid-template-columns: repeat(2, minmax(min-content, calc(50% - 2px)));
  padding: 4px;
  column-gap: 4px;
  width: calc(100% - 4px);
  min-width: max-content;
  display: grid;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
  cursor: default;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab-button {
  white-space: nowrap;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.tab-button--active {
  background-color: #0a84ff;
  color: white;
}

.tab-button--inactive {
  background-color: transparent;
  color: #676767;
  transition: 0.3s;
}

.tab-button--inactive:hover {
  background-color: rgb(200, 200, 200);
  transition: 0.3s;
}

<html>
  <body>
    <main>
      <div class="tab-button-container">
        <span class="tab-button tab-button-encrypt tab-button--active">
          <i class="fas fa-lock"></i>
          <a class="tab-button-label">Salataan</a>
        </span>

        <span class="tab-button tab-button-decrypt tab-button--inactive">
          <a class="tab-button-label">Salaus puretaan loremipsum</a>
        </span>
      </div>
    </main>
  </body>
</html>

Answer 2

这就是解决方案。

html {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
  width: max-content;
  height: fit-content;
  font-size: 14px;
}

body {
  overflow: hidden;
  font-family: sans-serif;
  margin: 0px;
  height: fit-content;
  width: max-content;
  border: none;
}

main {
  padding-left: 20px;
  padding-right: 20px;
  width: max-content;
}

.tab-button-container {
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  column-gap: 4px;
  width: calc(100% - 4px);
  min-width: max-content;
  display: grid;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
  cursor: default;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab-button {
  white-space: nowrap;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.tab-button--active {
  background-color: #0a84ff;
  color: white;
}

.tab-button--inactive {
  background-color: transparent;
  color: #676767;
  transition: 0.3s;
}

.tab-button--inactive:hover {
  background-color: rgb(200, 200, 200);
  transition: 0.3s;
}

<html>
  <body>
    <main>
      <div class="tab-button-container">
        <span class="tab-button tab-button-encrypt tab-button--active">
          <i class="fas fa-lock"></i>
          <a class="tab-button-label">Salataan</a>
        </span>

        <span class="tab-button tab-button-decrypt tab-button--inactive">
          <a class="tab-button-label">Salaus puretaan loremipsum</a>
        </span>
      </div>
    </main>
  </body>
</html>

如何使 CSS 长栏文本加宽网格而不是溢出？

How to make CSS long column text widen grid instead of overflowing?

html

css

overflow

css-grid

column-width