页面尺寸变化时如何修改<p>标签的文本内容？

先理清核心问题 #

你的代码没生效，主要是两个原因：

1. 原代码仅给div添加了after伪元素，原文本"This is a Test"并未被隐藏，所以看不到替换效果；
2. Tailwind的sm:断点是基于**视口宽度（浏览器窗口大小）**触发的，而非浏览器的缩放操作（Ctrl+/-）——缩放不会改变视口的CSS像素宽度，因此断点不会触发。

下面分两种场景给出针对性解决方案：

场景1：调整浏览器窗口大小（响应式断点）时替换文本 #

这是Tailwind的核心使用场景，用「显示/隐藏类」控制不同断点下的文本，比伪元素更直观易维护：

<div class="flex sm:bg-red-500/40">
  <!-- 小屏显示原文本，大屏隐藏 -->
  <span class="sm:hidden">This is a Test</span>
  <!-- 大屏显示新文本，小屏隐藏 -->
  <span class="hidden sm:inline">I am sm Size</span>
</div>

如果一定要用伪元素实现，需要先隐藏原文本：

<div class="flex sm:bg-red-500/40">
  <span class="sm:hidden">This is a Test</span>
  <div class="hidden sm:block after:content-['I_am_sm_Size']"></div>
</div>

场景2：浏览器缩放（Ctrl+/-）时修改文本 #

CSS无法直接检测浏览器缩放比例，必须用JavaScript监听相关事件：

<p id="dynamic-text">This is a Test</p>

<script>
  function updateText() {
    const zoomRatio = window.devicePixelRatio;
    const textEl = document.getElementById('dynamic-text');
    
    // 自定义缩放阈值，比如放大超过1.2倍、缩小低于0.8倍时修改文本
    if (zoomRatio > 1.2) {
      textEl.textContent = "Zoomed In";
    } else if (zoomRatio < 0.8) {
      textEl.textContent = "Zoomed Out";
    } else {
      textEl.textContent = "This is a Test";
    }
  }

  // 页面加载时执行一次
  updateText();
  // 缩放会触发resize事件，监听更新
  window.addEventListener('resize', updateText);
</script>

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