2

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.

MewTwo
  • 465
  • 4
  • 14
  • 1
    Does this answer your question? [Stretch text to fit width of div](https://stackoverflow.com/questions/5976289/stretch-text-to-fit-width-of-div) – Muhammad Talha Akbar Jun 29 '20 at 16:25
  • 1
    Sadly no and text-align:justify; only works for longer paragraphs. – MewTwo Jun 29 '20 at 17:02
  • Did you review the `stretch_text` plugin that web-tiki provided? https://stackoverflow.com/a/23168507/1887854 It adjusts `letter-spacing` as a function of `redundant space` which, in my opinion, is exactly what you are looking for. – Muhammad Talha Akbar Jun 29 '20 at 17:34

1 Answers1

3

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.

CYr
  • 349
  • 4
  • 17
  • 1
    If you found it as a duplicate of some other question, why not just ask for closing the question with reason of *duplicate*? – Muhammad Talha Akbar Jun 29 '20 at 16:26
  • 1
    @CYr 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. – MewTwo Jun 29 '20 at 19:33
  • 1
    @CYr I love your use of `vw` unit. It definitely does work but, the only downside is that the values need to be adjusted manually. Also, please suggest the addition of: `white-space: nowrap; overflow: hidden;` because currently, some text overflows to the next line. – Muhammad Talha Akbar Jun 29 '20 at 20:13
  • This would only work for this exact scenario right ? If i have another module with some other text it has to be done manually (adjusted) – MewTwo Jun 30 '20 at 06:26
  • @MewTwo yes, the vw would have to be adjusted so that the text is not cut off. – CYr Jun 30 '20 at 15:55