修复文本换行后按钮式链接的宽度异常问题

• 用 display: inline-block 替换 inline：这个属性既能让元素像行内元素一样自适应内容宽度，又支持设置边框、内边距、宽高这类块级样式，完美解决你遇到的边框异常+宽度撑满问题。
• 也可以用 display: inline-flex：如果需要按钮内的文字居中对齐，这个属性更便捷，同样不会出现宽度强制占满容器的情况。

给你一套可直接复用的CSS代码示例：

.button-link {
  display: inline-block; /* 核心解决属性 */
  border: 2px solid #2c3e50; /* 自定义边框颜色 */
  padding: 8px 16px; /* 内边距控制按钮整体大小 */
  text-decoration: none;
  color: #2c3e50; /* 自定义文字颜色 */
  border-radius: 4px; /* 可选：添加圆角优化视觉 */
  /* 可选：强制文字不换行，避免按钮拆分 */
  white-space: nowrap;
}

额外检查点：如果之前给这个链接设置过 width: 100% 或 max-width: 100%，需要移除这类属性，它们会强制元素撑满容器宽度。

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