WordPress长文本锚点标签无法换行溢出容器问题求助

问题现象 #

当锚点标签内的内容（比如超长URL）长度超过容器宽度时，不会像普通段落文本那样自动换行，而是沿同一行继续延伸，撑破容器宽度，导致页面在移动端右侧出现空白区域。

代码示例 #

<p><a href="https://...">loooooooooooooooooooooooooooooooooooooooong URL</a></p>

相关环境说明 #

• 锚点标签的父元素为<p>标签
• 父段落自定义CSS：padding-bottom: 2rem; line-height: 3.2rem;
• 场景为WordPress博客文章页，内容由默认编辑器生成
• 链接自身样式：font-size: 1.8rem; text-decoration: underline;

已尝试的无效方案 #

• 给锚点标签设置width: inherit;
• 给锚点标签设置display: inline-block;

解决方案 #

核心问题在于纯字母/数字组成的超长内容默认不会触发自动换行，需通过CSS强制启用换行规则。

推荐CSS代码 #

可根据需求选择以下两种属性之一：

/* 适用于无分隔符的超长串（如纯URL），强制在任意字符处换行 */
a {
  word-break: break-all;
}

/* 优先保持完整单词，仅在单词无法容纳时才拆分换行，适合含正常文本的链接 */
a {
  overflow-wrap: break-word;
}

针对性适配（避免全局影响） #

如果只想让文章内容区的链接生效，可使用更精准的选择器（适配WordPress默认文章类名）：

.entry-content p a {
  word-break: break-all;
}

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