如何修复文本无法适配容器时出现的边框断裂问题

你之前尝试的响应式字号、手动加宽容器的方案没法覆盖所有场景：纯视口单位的字号没有上下限，容易出现字号过大/过小的问题；手动设置固定宽度没法适配长度不确定的超长域名。

核心问题 #

当前的链接标签默认是行内元素，没有适配父容器宽度的规则，也没有针对无空格连续长文本（比如域名）的换行处理，固定大字号下内容必然会溢出边框。

修复方案 #

直接给.link_border类调整、补充以下属性即可，不管域名多长、视口多窄都不会出现内容溢出的问题：

.link_border {
  text-decoration: none;
  color: black;
  padding: 25px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  cursor: pointer;
  font-weight: bold;
  /* 替换原固定40px字号，用clamp实现自适应：最小16px，随视口宽度缩放，最大不超过40px */
  font-size: clamp(16px, 5vw, 40px);
  letter-spacing: .7px;
  border: 1px solid #777777;
  /* 新增属性 */
  display: block;
  width: 100%;
  box-sizing: border-box;
  word-break: break-all;
  overflow-wrap: break-word;
}

对应的HTML结构不需要改动：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />

<a href="https://stackoverflow.com" target="_blank" class="link_border">
  <i class="fa-solid fa-globe me-1"></i> Visit stackoverflow.com
</a>

属性说明 #

• clamp()做字号响应式适配兼容性更好，不会出现小屏字号太小、大屏字号过大的问题，比纯vw单位的适配效果稳定
• box-sizing: border-box会把padding、边框的宽度算入元素总宽度，避免内边距把容器撑破
• word-break: break-all搭配overflow-wrap: break-word专门处理无空格的长字符串，超长域名到容器边缘会自动折行，不会跑出边框

如果你需要单行显示链接、不希望文本折行，可以把换行相关的属性替换为以下配置，超长时会自动在末尾显示省略号：

/* 单行省略配置 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

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