Make font smaller if there is big text - html

Question

I have div and within that div text is displayed
<div class="td">
<div class="title main-color">test text</div>
</div>
but if there is big text it goes outside of div. I want to make that if there's big text font to become smaller. How can I achieve that?
JSFIDDLE is here
P.S. I don't want div to grow in height

Answer 1

Demo
https://jsfiddle.net/qjgjg2vh/
Html
<div class="td">
<div class="title main-color">test text</div>
</div>
<div class="td">
<div class="title main-color">test text is bigger now and goes outside of div and dont appears</div>
</div>
CSS
.main-color {
opacity: 0.6;
background: #ffffff;
}
.title {
height: 100%;
width: 470px;
border-radius: 20px;
float: left;
text-align: center;
line-height: 100px;
font-size: 26px;
overflow: hidden;
}
.td {
margin: 60px 0;
height: 100px;
width: 100%;
}
JQUERY
Your original code was getting the character count for ALL paragraphs that matched '.question p'. e.g. If you had two paragraphs, one with ten characters, the other with twenty characters, your JS would run once with a total of thirty, rather than processing each paragraph in turn.
$(function($){
$(".title.main-color").each(function () {
var numChars = $(this).text().length;
if ((numChars >= 1) && (numChars < 20)) {
$(this).css("font-size", "2.2em");
}
else if ((numChars >= 20) && (numChars < 60)) {
$(this).css("font-size", "1.8em");
}
else if ((numChars >= 60) && (numChars < 100)) {
$(this).css("font-size", "1em");
}
else if ((numChars >= 100) && (numChars < 140)) {
$(this).css("font-size", "0.9em");
}
else {
$(this).css("font-size", "0.8em");
}
});
});

Answer 2

You can use javaScript and make the font size smaller and smaller till the time the height of child element with the text fits the height of parent element. I also added visibility:hidden for the text and visibility:visible after fontSize decrease in order to get rid of flashing effect. Remember to put the text into extra element, eg. span. Change the text length to see the effect.
var samp = document.getElementById('samp');
fitFont(samp);
function fitFont(elem){
var child = elem.children[0];
var getFontSize = parseFloat(window.getComputedStyle(child).getPropertyValue('font-size'));
while(child.offsetHeight>elem.clientHeight){
getFontSize -= .1;
child.style.fontSize = getFontSize + 'px';
}
child.style.visibility = 'visible';
}
#samp {
background-color:white;
width:300px;
height:100px;
border:solid 2px #33aaff;
}
#samp span {
display: inline-block;
visibility:hidden;
font-size:50px;
}
<div id="samp">
<span>test text is bigger now and goes outside of div and dont appears test text is bigger now and goes outside of div and dont appears test text is bigger now and goes outside of div and dont appears
</span>
</div>

Answer 3

Of course you could aim for a javascript solution count the letters/words and adjust the font-size accordingly.
$(function() {
var $title= $(".title");
var $numWords = $title.text().split(" ").length;
if (($numWords >= 1) && ($numWords < 10)) {
$quote.css("font-size", "36px");
}
else if (($numWords >= 10) && ($numWords < 20)) {
$title.css("font-size", "32px");
}
else if (($numWords >= 20) && ($numWords < 30)) {
$title.css("font-size", "28px");
}
else if (($numWords >= 30) && ($numWords < 40)) {
$title.css("font-size", "24px");
}
else {
$title.css("font-size", "20px");
}
});
But if you want to use something without Javascript you could do a couple of things.
Unfortunately changing the font-size based on text-length is not possible with css.
Alternatives:
use a horizontal scrollbar (overfloy-x: scroll;)
make the box larger, (any dimension) https://jsfiddle.net/zjaq98Ln/10/
(show the overflow of text) probably not ideal
use text-overflow: https://jsfiddle.net/zjaq98Ln/9/

Answer 4

Try this
.main-color {
opacity: 0.6;
background: #ffffff;
}
.title {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 470px;
border-radius: 20px;
float: left;
line-height: 30px;
font-size: 26px;
}
.td {
margin: 60px 0;
height: 100px;
width: 100%;
}
<div class="td">
<div class="title main-color">test text</div>
</div>
<div class="td">
<div class="title main-color">test text is bigger now, goes outside of div and doesn't appear</div>
</div>
Live demo here: https://jsfiddle.net/grinmax_/zjaq98Ln/11/