My goal is to dynamically add elements with decreasing font sizes to a fixed-width/height container until they no longer fit. I've managed to scale the font based on the browser window size, but that's not the intended solution.
Is it possible to achieve this effect via CSS, JavaScript, or jQuery?
Take a look at this JSFiddle example: https://jsfiddle.net/qzt0wkyd/
Sample Code:
.bottom {
background-color: #fff;
text-align: center;
margin: 0px auto;
padding: 10px 5px 5px 5px;
margin-top: 5px;
width: 420px;
height: 150px;
border: solid #ff9400;
border-radius: 10px;
display: inline-block;
overflow: hidden;
box-shadow: inset 0 0 10px #000000;
}
.aside3 {
color: #FFB894;
background-color: #666;
font-size: 1.5em;
margin-top: -11px;
margin-left: -8px;
width: 103%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-shadow: 1px 1px 1px #111, -1px -1px 1px #999, 1px -1px 1px #111, -1px 1px 1px #999;
}
.linksites {
display: inline-flex;
float: center;
text-align: justify;
font-weight: bold;
color: orange;
letter-spacing: .15em;
font-size: 30px;
text-decoration: none;
text-rendering: optimizeLegibility;
transition: 2s ease;
-webkit-transition: 2s ease;
-moz-transition: 2s ease;
text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474
}
.linksites:hover {
text-decoration: none;
font-size: 2.5vwx;
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}<div class="bottom">
<p class="aside3">CONTACTS</p>
<div class="bottom-inner">
<!--ALL DYNAMICALLY INSERTED <a> TAGS COULD BE MORE OR LESS OR ADDED AND REMOVED-->
.... (additional code not shown for brevity)
</div>
</div>In the provided example, I have multiple links that exceed the parent container's size. Is there a way to automatically scale the font size down as more links are added and scale it up when links are removed to fit the container? (I initially tried using em and rem units before reverting to fixed pixel sizes)
Thank you in advance