Windows大字体下检测Label换行并动态修改内容的方法

思路 #

核心是判断第二个Label是否与第一个Label处于同一行——如果第二个Label换行（垂直位置低于第一个），就移除第一个Label中的"testing out"文本。通过JavaScript动态检测元素位置，同时监听窗口变化，适配不同系统缩放或窗口大小场景。

修改后的代码实现 #

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    /* 父容器样式：避免浮动元素高度塌陷，保证位置计算准确 */
    .label-container {
      overflow: hidden;
      width: 100%;
    }
  </style>
</head>
<div class="label-container">
  <label id="label1" class="form-label fw-bold">testing out label1</label>
  <label id="label2" (click)="method()" class="float-end fw-bolder">
    <em class="fas fa-exclamation-circle"></em>
    testing label 2 testing
  </label>
</div>

<script>
  const label1 = document.getElementById('label1');
  const label2 = document.getElementById('label2');
  // 保存原始文本，用于窗口恢复足够大时还原内容
  const originalText = label1.textContent;

  // 检测换行并处理文本的核心函数
  function checkWrapStatus() {
    // 同一行元素的offsetTop值一致，换行后第二个label的垂直偏移量会更大
    if (label2.offsetTop > label1.offsetTop) {
      label1.textContent = originalText.replace('testing out ', '');
    } else {
      label1.textContent = originalText;
    }
  }

  // 页面加载时执行一次检测
  window.addEventListener('load', checkWrapStatus);
  // 窗口缩放、系统文本大小调整时重新检测
  window.addEventListener('resize', checkWrapStatus);
</script>

关键说明 #

• 新增父容器.label-container，解决浮动元素高度塌陷问题，确保offsetTop的位置计算准确。
• 利用offsetTop属性判断垂直位置：同一行的元素垂直偏移量相同，换行后第二个Label的偏移量会超过第一个。
• 监听resize事件，保证系统文本缩放、窗口大小变化时，能实时更新文本状态。
• 保留原始文本，当窗口空间足够时自动恢复原内容，避免不可逆的文本修改。

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