在整个页面上均匀且动态地拆分文本

Question

我想知道是否可能有这样的事情

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

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

可以说，效果很好，字体大小合适，并且从一端均匀地分布到另一端。 我通过尝试查看哪种大小来制作了CSS。

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

例如，

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

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

请注意，直到我更改css（再次从跟踪和错误中发现）之后，home才不再从头到尾到达。

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

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

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

关于约瑟夫的回答； 这是针对我正在尝试向其中传递新文本的react组件。因此，当我遇到这种情况时， innerText返回的null为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

可以用javascript完成：

  var el = document.getElementById('test'); var html = el.innerText.split('').map(i => '<span>'+i+'</span>').join(''); el.innerHTML = html; 

  .full-width { font-size: 10vh; display: flex; justify-content: space-between; } 

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

Answer 2

对于反应情况：

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