在整個頁面上均勻且動態地拆分文本

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>);