CODEWITHSUNDEEP
javascripthtmlcss
Robolisk
Robolisk

Reputation: 1782

Split text evenly and dynamically across page

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>

Upvotes: 1

Views: 753

Answers (2)

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

for react case: 

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

Upvotes: 1

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

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>

Upvotes: 1

Related Questions