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

Question

I'm wondering if it's possible to have something like this

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

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

and let's say that works, font is a nice size and is spread from one end to the other evenly. I made that css just by trying to see which size worked.

But if I change the text from 'testing' to something 'home', it wouldn't stretch across no more.

for example,

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

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

Notice how home does not reach from end to end anymore, until I change the css (which again I discover from trail and error).

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

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

I'm not sure how I would dynamically change the text via js to predict the full needed width.

In regards to Yosef's answer; this is for a react component which I'm trying to pass new text towards in. So when I get into that situation innerText return's null so it causes me an error.

I tried approaching it like this

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

and then just display the contents

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

Answer 1

it can be done with 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

for react case:

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