按钮文本过长时出现断裂，设置white-space:normal仍无效？

问题根源有两点：

• <a> 标签默认是行内元素，行内元素无法设置固定宽度，也不会自动换行适配容器，会跟着文本长度延伸导致溢出容器。
• border 属性写法错误，border: 2px white; 缺少边框样式（如solid），导致边框无法正常显示。

修复方案 #

1. 将按钮转为块级或行内块元素，使其支持宽度设置与文本换行：
   • 添加 display: block; 或 display: inline-block;
2. 给按钮设置宽度（可直接设为250px，或设为width: 100%; 继承容器的max-width）
3. 修正border属性的完整写法

完整代码示例 #

CSS

.button {
  color: white;
  background-color: red;
  border: 2px solid white; /* 补充边框样式 */
  white-space: normal;
  padding: 10px 15px;
  text-align: center;
  display: block; /* 转为块级元素 */
  width: 100%; /* 继承容器宽度 */
  box-sizing: border-box; /* 避免padding撑开按钮宽度 */
}
.container {
  max-width: 250px;
}

HTML

<div class="container">
  <a class="button">my button whose text is longer than 250px</a>
</div>

额外说明 #

• box-sizing: border-box; 用于确保按钮的内边距不会额外增加总宽度，保证按钮刚好适配容器的250px宽度。
• 如果不需要按钮占满容器，也可以直接给.button设置width: 250px;，同样需要配合display: block;或display: inline-block;生效。

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