Text Filling Parent's Width
Hey everyone,
I am trying to achieve something making the text filling the whole width available from their parent element, but i cannot find what ia m doing wrong here :
https://codepen.io/Astrosmos/pen/zYXagxw
Thanks for the help in advance !
7 Replies
there are a couple of issues. firsly, a <p> element is a blokelement (100% width) so it already has the same width as the parent.
(in css give the <p> a width: fit-content)
then in js, make sure you calculate and update the font size inside the while loop
https://codepen.io/MarkBoots/pen/eYojZeP?editors=1111
But, I'm not sure this should be done this way. What do you want to acchieve as an end result. There are probably better ways (such as svg)
svg aren't dynamically editable i think
I want something like that :
As i type, the script must adjust the font-size so that the text always fills the width available in its container (it should also take into account the window resizing)
you might want to look at this post on css-tricks. it has multiple options
https://css-tricks.com/fitting-text-to-a-container/
Chris Coyier
CSS-Tricks
Fitting Text to a Container | CSS-Tricks
There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we
I just checked out every way but, since I don't want to use any framework or lib, just vanilla HTML, CSS & JS, there's not many option other than svg that you first told me, but on the codepen provided it doesn't seems to really do whati'm searching for
yea, even with an svg, you do need a viewbox size. I'm not the best with svg's, maybe there are some properties that auto scale text. not sure