我猜你是在测试textContent属性，对吗？
解决方案可以将测试属性更改为**innerText**：

[...document.querySelectorAll('div')].forEach(_=>{
_.insertAdjacentHTML('afterend',
  `<code>${_.style.cssText}</code>:
  <br>- .innerText: ${verbalizeWhitespace(_.innerText)}
  <br>- .textContent: ${verbalizeWhitespace(_.textContent)}`
)});

function verbalizeWhitespace(str) {
 return '»<code>' + str.replace(
  /\s/g,
  (m) => `<mark>[${
   { '\n': '\\n'
   , '\t': 'tab'
   , ' ': 'sp'
   }[m] || m.charCodeAt(0)
  }]</mark>`) + '</code>«';
}

html {
  color-scheme: light dark;
  line-height: 1.3;
}

div {
  border: 1px solid;
  border-color: color-mix(in srgb, currentcolor 50%, transparent);
  font-size: .7em;
  word-spacing: 1em;
}

mark {
  padding: .3ch;
  margin: .5ch;
}

<div style="white-space: normal;">
 A B 
 C D
</div>
<div style="white-space: pre;">
 A B 
 C D
</div>
<!--
N.B.: There are also spaces between "B"s and a newlines.
-->

如图所示，innerText甚至反映了元素中的空格是否应该对呈现的结果（预格式化文本）有意义。
你在devtools检查器中看到的只是一个提示，在DOM中（可能在源代码中）实际上有一些空白，但是除非给定的元素被（样式化为）预先格式化，否则它不应该对渲染有任何影响。
如果你确实将white-space设置为pre，pre-wrap，那么所有的空白（前导，尾随，“缩进”）都很重要。

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
  pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
  dignissimos aliquam numquam voluptatibus qui dolores neque!</div>

字符串
或

<div><!--
  -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
  pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
  dignissimos aliquam numquam voluptatibus qui dolores neque!<!--
--></div>

型