getting title to automatically reduce font-size based on container size to fit on 1 line

0 Views

Hiall,

I’m using wordpress and are displaying a main title header for feature article.

Read More
<span class="mytitle">
<?php the_title(); ?>
</span>

Now if the heading title is 30 characters in length it fits onto 1 line perfect, but if the length of the title is 32 characters then it spills onto 2 lines and I have an ugly looking headline because there is all this unwanted space.

Is there anyway to tell the title header in css to stay on 1 line and automatically reduce its own font size to fit in that one line etc???

I know I can use
css 

white-space: nowrap;

to stop the line from wrapping to the next line, but what about the font-size, anyway for it to automatically reduce its size based on the container it is in or?

Any help would be great

Post Views: 0

Related posts

Leave a Reply

4 comments

  1. In my opinion the best option is to set 2 css classes and a simple if statement for the title length:

    $string = the_title();
    $length = strlen( utf8_decode( $string ) );

    if ($length > 30) {
    echo '<span class="larger">' . the_title() . '</span>';
    } else {
    echo '<span class="smaller">' . the_title() . '</span>';
    }

  2. You can use a media query to change the size of the text based on screen size.

    example css:

     @media screen and (max-width:1024px) {
       .mytitle{
           font-size:28px;
        }
 }

    you can put whatever pixel amount you want in the max-width: <– what ever screen size you want to trigger this style at.

    you can copy paste the same code and use it at a mobile width of like 480px and change the font size to 24px, so then it works are a bunch of different screen sizes.

  3. You can achieve this with JavaScript in a number of ways. Here’s a simple plug and play solution. Note that it requires your container to have a height: 

    function adjustHeights(elem) {
      var fontstep = 2;
      if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
        $(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
        adjustHeights(elem);
      }
    }

adjustHeights('h1');
    #container {
  width: 300px;
  height: 30px;
  }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1>Some text that normally flows more than one line</h1>
</div>

    Source: Meta Toad

  4. function adjustHeights(elem) {
      var fontstep = 2;
      if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
        $(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
        adjustHeights(elem);
      }
    }

adjustHeights('h1');
    #container {
  width: 300px;
  height: 30px;
  }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1>Some text that normally flows more than one line</h1>
</div>
    1. List item