javascript - 跨页面均匀动态地拆分文本

Question

我想知道是否有可能有这样的东西

.full-width {
  font-size: 10vh;
  letter-spacing: 15vw;
}

<div class="full-width">
  testing
</div>

假设这行得通，字体大小合适，并且从一端均匀分布到另一端。我只是通过尝试查看哪种尺寸有效来制作该 CSS。

但是如果我将文本从“testing”更改为“home”，它就不会再延伸了。

例如，

.full-width {
  font-size: 10vh;
  letter-spacing: 15vw;
}

<div class="full-width">
  home
</div>

注意 home 如何不再从头到尾到达，直到我更改 css(我再次从跟踪和错误中发现)。

.full-width {
  font-size: 10vh;
  letter-spacing: 30vw;
}

<div class="full-width">
  home
</div>

我不确定如何通过 js 动态更改文本以预测所需的全部宽度。

关于 Yosef 的回答；这是一个 react 组件，我试图将新文本传递给 in。所以当我遇到这种情况时 innerText 返回 null，所以它会导致我出错。

我试过这样接近它

var footerContents = this.props.page();
 var contents = [];
 footerContents.split('').map(i => contents.push(<span> {i} </span>)).join('');

然后只显示内容

<div class="full-width">
  {contents}
</div>

Answer 1

对于 react 案例:

var footerContents = this.props.page() || '';
var contents = footerContents.split('').map(i => <span> {i} </span>);