Kevin Powell - Community•2w 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

ἔρως•2w 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•2w ago

vicOP•2w ago

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

snxxwyy•2w 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•2w 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•2w 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.

ἔρως•2w 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•2w 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