Kevin Powell - Community•2mo ago

how to make a text p tag fills it from parent container

Code link : https://codepen.io/Vicky-clowdy/pen/OJKwzye So I want that p tag text to completely takes width and fills it

Untitled

...

8 Replies

ἔρως•2mo ago

but it is #two has a width of 50%, and p has 100% and 100% of 50% is 50% it's working as it should

vicOP•2mo ago

vicOP•2mo ago

No I want the text "hello" to fill Ihe gray div

snxxwyy•2mo ago

I don’t believe you can necessarily do that. There are tools out there i believe but it’s more magic number font sizes

Alex•2mo ago

It is possible but only via a weird hack with relatively low browser support: https://kizu.dev/fit-to-width-text/

Fit-to-Width Text

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs.

Alex•2mo ago

One solution would be to hardcode font size of the element in vw/vi units, but doing so breaks accessibility recommendations about allowing users to adjust don't size. Another would be using an image with an alt tag, which is also not ideal.

ἔρως•2mo ago

technically speaking, there is also this:

<div id='one'>
  <div id='two'>
    <p><svg width="100%" heght="100%"><text fill="currentColor" x="0" y="16" textLength="100%" lengthAdjust="spacingAndGlyphs">Hello</text></svg></p>
  </div>
</div>

<div id='one'>
  <div id='two'>
    <p><svg width="100%" heght="100%"><text fill="currentColor" x="0" y="16" textLength="100%" lengthAdjust="spacingAndGlyphs">Hello</text></svg></p>
  </div>
</div>

it technically fulfills the requirement of filling the width

vicOP•2mo ago

Thanks for this , but actually I left this cuz it's look good without that

Gaming

Programming

how to make a text p tag fills it from parent container