CSS direction:rtl导致Div title首字符%丢失的问题求助

算力阿峰

2026-8-18

问题分析与解决方案

问题现象

当元素设置direction: rtl时，其title属性值开头的%会被截断：原本tooltip应显示%Test%.Identification.CustomerNumber，实际只显示Test%.Identification.CustomerNumber。移除direction: rtl后恢复正常，且在Chromium（Edge/Chrome）、Gecko（Firefox）引擎的多款浏览器中均复现。

原因推测

这是浏览器引擎处理RTL方向元素title属性时的解析Bug——RTL文本排版逻辑错误地将开头的%识别为可忽略的特殊标记，导致被截断。

解决方案

方案1：转义开头的百分号

把title属性中第一个%替换为HTML实体%，避免浏览器误解析：

<div class="line-cut" title="&#37;Test%.Identification.CustomerNumber">
   Hello
</div>

CSS保持原有配置即可，此时tooltip能正常显示完整内容。

方案2：使用自定义Tooltip替代原生title

原生title的样式和行为受浏览器限制，改用自定义tooltip可完全控制内容渲染：

<style>
.line-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
  direction: rtl;
  position: relative;
}
.custom-tooltip {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 100;
}
.line-cut:hover .custom-tooltip {
  display: block;
}
</style>
<div class="line-cut">
   Hello
   <span class="custom-tooltip">%Test%.Identification.CustomerNumber</span>
</div>

方案3：仅对文本内容设置RTL方向

若无需整个容器的RTL布局，仅给内部文本元素单独设置direction: rtl，容器保留默认LTR：

<style>
.line-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}
.line-cut-text {
  direction: rtl;
}
</style>
<div class="line-cut" title="%Test%.Identification.CustomerNumber">
   <span class="line-cut-text">Hello</span>
</div>