Span text to the edge of the div (no white-space)

user_9953906 0
Viewed 235

I'm looking for a solution to span the text to the edge of the div. I don't want to have any white-space in the div.

Here is my div

<div class="m-card__text-front">
     <p class="fit-text">TEST TEXT</p>
     <p class="is-bold fit-text">FOO BAR</p>
     <p class="is-bold fit-text">LOREM</p>
     <p class="fit-text">LOREM IPSUM</p>
</div>

Now this looks looks at the moment like this

enter image description here

The red marked spots that is where I want the text to go span to.

I also need the bold text to be a different size (bigger) then the other text.

I am currently using the fitText function. https://github.com/davatron5000/FitText.js

Used like this: <script> $('.fit-text').fitText(0.8); </script>

EDIT:

Here is how the HTML looks like with the plugin:

<p class="fit-text" style="font-size: 38.6055px;">TEST TEXT</p>

Font size is being added automatically.

EDIT 2:

Well i just realized that i explained my problem wrong. How I explained it your function does exactly what I described. But i want to span the text and make the letter accordingly bigger. That is why I tried to use that pluggin. Sorry Englisch is not my first language.. My bad.

frontend css html javascript
1 Answers

Will this work?

        <div class="m-card__text-front">
           <p style="font-size:19vw; white-space: nowrap; overflow: hidden;">TEST TEXT</p>
           <p style="font-size:23vw; white-space: nowrap; overflow: hidden;">FOO BAR</p>
           <p style="font-size:28vw; white-space: nowrap; overflow: hidden;">LOREM</p>
           <p style="font-size:14.5vw; white-space: nowrap; overflow: hidden;">LOREM IPSUM</p>
        </div>

JSFiddle

You can adjust the vw(in style) if text is too small or big. In this code, if you adjust the page size the text will adjust its font size along with the page.

user_126632200
Related