Make font-size smaller when text reaches end of div?

Question

I have a div that has a title text in it. For some titles, the text can be pretty long and drop to another line like so:

Here is the text I want to lower since it is going on to a new line.

The card HTML:

    <div class="card show-card">

                <a href="/theatresarniashow/{{show.show_slug}}" title="">
                  <div class="card-image">
                    <figure class="image is-4by3">
                      <img data-src="{{show.featured_image.url}}" alt="Thumbnail image for {{show.title}}" class="card-image-img owl-lazy">
                    </figure>
                  </div>
                </a>
<div class="card-content">



          <a href="/theatresarniashow/{{show.show_slug}}" title=""><h2 class="card-show-title">{{show.title}}</h2></a>

          <a href="/show/{{show.show_slug}}" title=""><h2 class="card-show-title">{{show.title}}</h2></a>

        <p class="card-show-date">{{show.starting_date}}</p>
        <p class="card-show-genre">{{show.genre}}</p>
      </div>
    </div>

CSS:

.card-show-title {
  /* Show Title Can be wr: */
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;

  color: #000000;
  letter-spacing: -0.16px;
  font-weight: bold;
}

.show-card {
  border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  border: 0px solid #000000;
}

You will need to control the font-size style using Javascript. Essentially just grab the `{{ show.title }}` value and check how many characters it contains. If that amount is larger than your arbitrary limit, apply a CSS style of lesser font-size. — Marc Bosse, Jan 04 '18 at 20:25
Possible duplicate of [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) — Cedric, Jan 04 '18 at 20:31
https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Cedric, Jan 04 '18 at 20:31

Maxime Gélinas · Answer 1 · 2018-01-08T15:16:35.417

3

You can do it with pure CSS using that magic trick:

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

#problematic-title {
  /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

<h1 id="problematic-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

See: https://css-tricks.com/snippets/css/fluid-typography/

edited Jan 08 '18 at 15:16

answered Jan 04 '18 at 20:37

Maxime Gélinas

2,202
2
18
35

Look at that! That's a nice CSS trick. Only issue I see here is this would effectively kill any common font-size styling across all your cards. While not a huge issue, I could see this being quite the pain in some scenarios. – Marc Bosse Jan 04 '18 at 20:46
@MarcBosse I can't understand your point here? It can be used with any CSS selector so you can select just the wanted elements. – Maxime Gélinas Jan 05 '18 at 01:25
Right, just pointing out the flaw in the way it's applied above. Might be a good idea to refer to it via a css id in the example? – Marc Bosse Jan 08 '18 at 14:44
An id or something like `.text-fluid { /* ... */ }`. They're many ways to do it. – Maxime Gélinas Jan 08 '18 at 14:52
Suggested a quick edit to the example, the id name isn't as eloquent but the idea is there. – Marc Bosse Jan 08 '18 at 14:54
Nice- but CSS calc has limited browser support, especially mixed unit. I don't think this will work in IE or Safari. Maybe put a fallback in too? But good answer, +1 – Alicia Sykes Jan 08 '18 at 15:22
1

@Lissy Thanks! I don't think a fallback is needed, `calc` works 95% of the time. See https://caniuse.com/#search=calc. The default `h1` size will be assigned if `calc` isn't supported. – Maxime Gélinas Jan 08 '18 at 16:11

Make font-size smaller when text reaches end of div?

1 Answers1