如何用word-wrap限制元素宽度？解决文本换行后底部边框过长问题

首先来说你遇到的边框超出换行文本宽度的问题：
这是因为<h3>标签默认是块级元素（display: block），它的宽度会撑满父容器的可用空间，所以底部边框自然会占满整个容器宽度，而不是贴合换行后的文本内容。

最佳解决方案 #

我们只需要修改.tab-title的显示方式，让它的宽度收缩到文本本身的宽度即可，推荐两种实用方式：

方式1：使用inline-block

给.tab-title添加display: inline-block，再加上vertical-align: bottom避免垂直对齐的小偏移：

.tab-title {
  /* 保留原有样式 */
  display: inline-block;
  vertical-align: bottom;
  overflow-wrap: break-word; /* 同时添加换行控制，防止文本溢出 */
}

方式2：使用display: table

这种方式也能让元素宽度贴合内容，而且垂直对齐的表现更稳定：

.tab-title {
  /* 保留原有样式 */
  display: table;
  overflow-wrap: break-word;
}

修改后，底部边框就会完美贴合换行后的文本宽度了，同时配合overflow-wrap: break-word（也就是你提到的word-wrap，overflow-wrap是它的标准别名），可以确保长文本在设定宽度内自动换行。

关于如何用word-wrap限制元素宽度 #

word-wrap现在更推荐使用标准属性名overflow-wrap，它的作用是当文本长度超过元素可用宽度时，强制将长单词或字符串换行，避免溢出元素范围。

使用步骤很清晰：

1. 给父元素或目标元素设置固定的width或max-width（比如你的.cont设置了width: 250px）
2. 给文本元素添加overflow-wrap: break-word（兼容旧浏览器可同时写word-wrap: break-word）

示例代码：

.your-text-element {
  width: 250px;
  overflow-wrap: break-word; /* 等价于 word-wrap: break-word */
}

这样当文本长度超过250px时，就会自动换行，不会超出元素的宽度限制。

最后给你整合后的完整代码示例：

CSS

.cont { width: 250px; }
.tab-title {
  border-bottom: 2px solid transparent;
  margin-bottom: 0px;
  padding-bottom: 3px;
  color: #1573a4;
  opacity: .89;
  font-size: 18px;
  line-height: .9;
  letter-spacing: -.3px;
  font-weight: 300;
  display: inline-block; /* 关键修改 */
  vertical-align: bottom;
  overflow-wrap: break-word; /* 换行控制 */
}
.tab-title-active {
  border-bottom: 2px solid #1573a4;
  color: #1573a4;
  opacity: 1;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: .9;
  letter-spacing: -.3px;
}
.tabs-container div:last-child { text-align: right; }
.tabs-container {
  width: 100%;
  border-bottom: .5px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 可选，让两个tab底部对齐更整齐 */
}

HTML

<div class="cont">
  <div class="tabs-container">
    <div><h3 class="tab-title">Tab 1</h3></div>
    <div><h3 class="tab-title tab-title-active">Internal Stakeholder Communications</h3></div>
  </div>
</div>

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