WordPress Docent主题如何将博客h2标题设置为左对齐

解决方案 #

你之前使用的align属于无效CSS属性，控制文本对齐的正确属性为text-align，配合宽度限制和换行规则即可实现需求。

可用CSS代码如下：

h2 {
  text-align: left;
  width: 100%;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

原错误写法说明：

• 首次尝试使用的align不是标准CSS文本对齐属性，浏览器无法识别，因此修改没有生效
• 第二次使用width: max-content会强制让h2宽度和文本长度保持一致，忽略父容器宽度限制，因此出现溢出问题

样式不生效的兼容方案：

如果上述代码没有生效，是因为Docent主题原有样式优先级更高，可以使用更高优先级的选择器，代码如下：

.docent-content h2, .entry-content h2 {
  text-align: left !important;
  width: 100% !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

将代码添加到WordPress后台「外观」-「自定义」-「额外CSS」输入框中，保存后清理站点和浏览器缓存即可生效。

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