Bootstrap 4 resize text into a div responsive

Question

I am trying to resize a text that is inside a div, like this example.

When i resize the div, also the font-size must be resized.

I try to set the text element with pure css with all the relative length units, but doesn't work. The font-size must be depends only by div size (so vw is not appropriate). The only alternative that I think is set font-size by javascript.

<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>

<div>
  <p style="font-size: 2rem">Hello World</p>
</div>

Which is the best way, preferably in bootstrap 4 or pure css ?

Welcome to Stack Overflow. Please show what you tried. This is not a request site. Consider reading this: https://stackoverflow.com/help/how-to-ask and https://stackoverflow.com/help/minimal-reproducible-example — Soban, Jul 24 '20 at 08:54
don't think you can do that w/B4 or pure CSS. Think you have to use JS — kabooya, Jul 24 '20 at 09:34

score 0 · Answer 1 · answered Jul 24 '20 at 09:32

Check out this Question. Onresize for div elements?

You can change this:

var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        /* do something on resize */
    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

Into

 var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        document.getElementById(*ID OF OBJECT*).style.fontSize = "20%"; //use % or vh/vw f.e.

    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

Bootstrap 4 resize text into a div responsive

1 Answers1