Change font-size of dynamically added elements

Question

I have a with a fixed width/height to which i'm planning to dynamically add elements to. What im trying is for the font of those added elements to decrease the more there are as there will be a point they wont fit on the parent .

I was able to make the font scale if i scale the browser window...but thats not the plan :)

Is this possible at all, whatever means(css/js/jquery)?

See 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-->
    <a class="linksites" href="mailto:sample@mail">Mail1&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail2&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail3&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail4&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail5&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail6&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail1&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail2&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail3&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail4&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail5&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail6&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail1&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail2&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail3&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail4&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail5&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail6&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail1&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail2&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail3&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail4&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail5&nbsp;&nbsp;</a>
    <a class="linksites" href="mailto:sample@mail">Mail6&nbsp;&nbsp;</a>


  </div>
</div>

In that example i have a bunch of links that dont fit in the parent div, how, if possible, if i add more they scale down or if i remove some they scale up all to for the div. (I set the font-size back to fixed px, after i experimented with em,rem and the likes)

Thanks a lot in advance

Check out these two questions [Scale text to fit div](https://stackoverflow.com/questions/4165836/javascript-scale-text-to-fit-in-fixed-div) and [Dynamic Text Size](https://stackoverflow.com/questions/5358183/is-it-possible-to-dynamically-scale-text-size-based-on-browser-width) — Greevman, Jul 04 '17 at 19:16
you chnge the font size or change the div size what you want ? — Bhargav Chudasama, Jul 07 '17 at 05:31
@Greevman good read on getComputedStyle indeed thanks for that. Cheers — Alejandro Suarez, Jul 09 '17 at 04:02

score 1 · Accepted Answer · answered Jul 04 '17 at 19:16

1

using jQuery you can dynamically change css values acording to the amount of elements you have doing something like this

if ($('a.linksites').length>9 && $('a.linksites').length<13) {
    $('.linksites').css('font-size','20px')
}

you could set different font sizes for different amounts of linksites by concatenating various if statements like the one above

answered Jul 04 '17 at 19:16

natral

986
1
18
42

Nice solution tried it and worked when i per-calculate the amount of elements that will be and what will be their required size. Mind u the list of a tags are inserted with javascript so and can be dynamically added/removed, i have no way to know when it changed unless i visually see they overflow the parent div. I figure that there could be a way to dynamically adjust the size of the text on the a tags as they get added/removed to stay within the div without overflowing. Maybe not possible to be done dynamically :( – Alejandro Suarez Jul 07 '17 at 05:23
@alejandro If the space where the tags are going to be stored is fixed and you have pre-calculated the font size required for the number of tags then you can call the above condition in the script which adds/removes tags to/from the div. – natral Jul 07 '17 at 16:23
What if i dont the number of tags a scripts grabs the tags from a database so the amount can grow or reduce so correct the div containing the tags is fixed size but amount of tags is uknown. I posted so many to ahow how they overflow the div instead of reducing text size to fit. – Alejandro Suarez Jul 09 '17 at 03:55

Change font-size of dynamically added elements

1 Answers1