设置tab按钮max-height:20px后文字溢出的技术求助

你遇到的文字溢出问题，本质是max-height: 20px和padding: 13px 20px的数值冲突：上下padding加起来就有26px，已经超过了max-height设定的20px，再加上文字本身的行高（默认一般是字体大小的1.2倍左右），容器的高度根本放不下这些内容，自然就会出现文字溢出。

我给你几个不同方向的解决思路，你可以根据自己的需求选择：

方案1：调整max-height到合理值（推荐） #

如果没有必须限制高度为20px的要求，直接把max-height调高到能容纳padding和文字的数值就行。比如上下padding是26px，加上文字行高（假设字体16px，行高19px），设置到45px左右就足够了：

body .tab ul.tab-nav li a {
  text-align: center;
  width: 90%;
  /* 调整为足够容纳padding+文字的高度 */
  max-height: 45px;
  color: #fff;
  font-weight: inherit;
  padding: 13px 20px;
  cursor: pointer;
  margin-left: 5%;
  top: 1px;
  border: 1px solid #000;
  background: rgba(100, 100, 100, 0.8);
}

方案2：减少上下padding，适配20px的高度 #

如果一定要保留max-height:20px，那就要压缩上下内边距，让总高度（padding+文字行高）不超过20px。比如把上下padding改成5px，再配合调整行高：

body .tab ul.tab-nav li a {
  text-align: center;
  width: 90%;
  max-height: 20px;
  color: #fff;
  font-weight: inherit;
  /* 降低上下padding，控制总高度 */
  padding: 5px 20px;
  cursor: pointer;
  margin-left: 5%;
  top: 1px;
  border: 1px solid #000;
  background: rgba(100, 100, 100, 0.8);
  /* 让行高和字体大小匹配，减少高度占用 */
  line-height: 1;
  font-size: 14px;
}

方案3：用box-sizing调整盒模型（适合必须保留原有padding的场景） #

默认CSS盒模型是content-box，padding会加到容器高度外面，设置box-sizing: border-box后，padding会包含在max-height的范围内。不过因为20px还是比26px的padding小，所以还需要配合缩小字体或隐藏溢出：

body .tab ul.tab-nav li a {
  text-align: center;
  width: 90%;
  max-height: 20px;
  color: #fff;
  font-weight: inherit;
  padding: 13px 20px;
  cursor: pointer;
  margin-left: 5%;
  top: 1px;
  border: 1px solid #000;
  background: rgba(100, 100, 100, 0.8);
  /* 让padding和border纳入max-height计算 */
  box-sizing: border-box;
  /* 隐藏溢出的文字（如果必须保留原有padding的话） */
  overflow: hidden;
  /* 缩小字体和行高，尽量让内容适配 */
  line-height: 1;
  font-size: 12px;
}

• 如果需要固定高度，也可以用height代替max-height，但max-height的优势是当内容较少时，容器会自动变矮，更灵活。
• 可以用浏览器开发者工具（F12）的元素面板，实时调整数值，直观看到高度变化，快速找到合适的数值。

内容的提问来源于stack exchange，提问作者user9576028