如何用css实现把“我不爱996”变成“699爱不我”？

可以使用 CSS 的 unicode-bidi 和 direction 属性来实现这个效果，核心思路是利用 Unicode 的双向文本特性。

.flipped-text {
  unicode-bidi: bidi-override; /* 启用双向文本覆盖 */
  direction: rtl; /* 设置文本方向为从右到左 */
}

HTML 代码示例：

<span class="flipped-text">我不爱996</span>

解释：

• unicode-bidi: bidi-override; 这个属性告诉浏览器忽略文本的默认方向性，并强制按照 direction 属性指定的方向渲染。
• direction: rtl; 这个属性将文本方向设置为从右到左 (right-to-left)，从而实现反转效果。

更健壮的方案 (推荐):

为了避免潜在的布局问题，特别是当字符串中包含其他非CJK字符和数字混合的情况，最好将文本逐字包裹在 <span> 标签中，并对每个 <span> 应用样式：

<span class="flipped-text">
  <span>我</span>
  <span>不</span>
  <span>爱</span>
  <span>9</span>
  <span>9</span>
  <span>6</span>
</span>

这样可以确保每个字符都被正确地反转，而不会受到其他字符的影响。

其他方法 (不推荐):

虽然可以使用 transform: scaleX(-1); 来实现视觉上的反转效果，但这只是镜像翻转，并非真正的文本顺序反转。这会导致一些问题，例如：

• 文本选择: 选择文本时仍然是从左到右的顺序。
• 屏幕阅读器: 屏幕阅读器仍然会按照原始顺序朗读文本。
• 语义: 文本的语义没有改变，仍然是“我不爱996”。

因此，使用 unicode-bidi 和 direction 的方法是更推荐的，因为它可以正确地反转文本的逻辑顺序，而不仅仅是视觉上的翻转。