阿拉伯语版本英雄区块双引号显示不全问题求助

问题根源 #

RTL（阿拉伯语）布局下元素排版方向从右到左，原来针对LTR（英文）设置的绝对定位规则（比如left属性）会导致引号元素超出容器范围，被overflow:hidden截断。

具体修复方案 #

1. 适配RTL的引号定位
   给引号元素添加RTL专属样式，替换原有的LTR定位逻辑：

/* 原有LTR样式 */
.quote {
  position: absolute;
  left: 0;
  /* 其他原有样式 */
}

/* 新增RTL适配样式 */
[dir="rtl"] .quote {
  left: auto;
  right: 0;
  transform: translateX(50%); /* 调整偏移方向，避免超出容器 */
}

2. 调整容器内边距预留显示空间
   如果英雄区块容器设置了overflow:hidden，可以添加自适应内边距，确保引号有足够的显示区域：

.hero-section {
  padding-inline: 2rem; /* 使用inline属性自动适配LTR/RTL的左右内边距 */
}

3. 修正首尾引号的伪元素位置
   RTL下起始引号应在右侧、结束引号在左侧，调整伪元素的定位：

[dir="rtl"] .quote::before {
  right: -1rem;
  left: auto;
}
[dir="rtl"] .quote::after {
  left: -1rem;
  right: auto;
}

验证要点 #

• 切换RTL布局后，确认引号完全显示在容器可视范围内
• 确保调整后的样式不会影响原LTR布局的正常展示

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