How to make font-size smaller when it extends to a parent

Question

In CSS, for example this code:

<html>
<head>
  <style>
* {
  box-sizing:border-box;
}
.container {
height:100px;
width:400px;
}
  </style>
</head>
<body>
  <button id="click" />
  <div class="container">
    <p id="text" ></p>
  </div>
</body>
  <script>
  Some function() {
    //code that adds 'text' to the paragraph every click
  }

  Some another function() {
    Some if(text extends to the width of the parent, then lower the font-size) {
    }
  }
  </script>
</html>

How do I make the font-size smaller and smaller if its width extends? Like for every click of the button adds 'text' on the paragraph, so when I repeat it many times, It would be like: texttexttexttexttext and so on, if it extends then lower the font size

After looking at your history I've noticed you ask questions and don't mark answers as helpful, correct, or provide any feedback to people trying to help you. - On this website, it will help you and justify the time people spend on helping you if you communicate, upvote helpful answers, or mark answers as correct. Regardless, I hope my answer has helped with your problem. - Good luck. — Aib Syed, Oct 22 '20 at 17:06

Aib Syed · Answer 1 · 2020-10-22T16:48:39.737

Here is one way. Run the script below, comments are within to help understand.

NOTE: You did not provide how you would be increasing width. In your code, there is a set width of 400px on the container. This width will not change unless you make it change through media queries or javascript.

//Get text element by id "text"
  var text = document.getElementById("text");
  //Get div element by id "container"
  var container = document.getElementById("container");
  //Get current container width
  var w = container.offsetWidth;
  console.log(w);
  
   function addText() {
   //if nothing exists within p element add "text" or if something does exist increment "text"
    if (text.innerHTML.length <= 1  || text.innerHTML.length >= 1) {
    text.innerHTML += "text";
    }
    //check the container width and increase font size based on width
    if (w > 300) {
    text.style.fontSize = "50px"
    }
  }

<html>
<head>
  <style>
* {
  box-sizing:border-box;
}
.container {
height:100px;
width:400px;
}
.paragraph {
font-size: 12px;
}
  </style>
</head>
<body>
  <button onclick="addText();" id="click" />Click Me</button>
  <div class="container" id="container">
    <p class="paragraph" id="text"></p>
  </div>
</body>
</html>

How to make font-size smaller when it extends to a parent

1 Answers1