mobile logo

make font size smaller when post title exceeds a limit

Solution:1

Firstly, this will probably be awkward as you should be building responsive sites. Your text should readjust based on the screen reading the website, and if you are trying to define changes to make the text fit on one line you could be tweaking this over and over again.

I advise that you design around this and customise your layout rather than trying to change size based on text length, over and over again.

However, you could do something as follows within PHP/CSS.

Check the strlen on the get_title function. If the strlen is more than a specified amount (say 20) you’d add a class, otherwise ignore it. Then, you’d style that class responsively based on how you wanted to change the font.

You’d need to edit your theme to replace the Title with the following:

<?php 

$title = get_the_title();

if (strlen($title) >= 20) {
  <h1 class="longer-text-modifier">
} else {
  <h1>
}

  <?= $title; ?>
</h1>

With your CSS being

.longer-text-modifier {
  font-size: 16px; // or em or rem
}

Edit: This could also be done on the fly with JavaScript.

Solution:2

Say you have this:

<div id="outer" style="width:200px; height:20px; border:1px solid red;">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>

Then you can do something like:

$(document).ready(function () {
    resize_to_fit();
});

function resize_to_fit(){
    var fontsize = $('div#outer div').css('font-size');
    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);

    if($('div#outer div').height() >= $('div#outer').height()){
        resize_to_fit();
    }
}