2

I have a wordpress blog and each article has a title. Some titles are longer than others, and if the title gets too long it will be split into 2 lines.

However, I'd like to keep the title in one line at all times, and if it gets too long for that just adjust the font size of my title.

How could I do that? I do know some and am ready to work with Wordpress, CSS, Javascript/jquery, but I do not know how to approach this problem.

George Welder
  • 3,787
  • 11
  • 39
  • 75
  • `white-space: nowrap`? – kukkuz Nov 30 '16 at 07:48
  • Possible duplicate of [How to: Reduce font-size if a line breaks](http://stackoverflow.com/questions/28485351/how-to-reduce-font-size-if-a-line-breaks). Also have a look at the linked questions in this question. – Marvin Nov 30 '16 at 07:53

2 Answers2

0

There are few ways to do with with both pro's and cons.

1) Try to find some existing 3-rd party implementation. Typically, you dont want to spend time on such kind of things, if somebody has already done it.

2) With css you should specify the "white-space: nowrap" property for the title style. But adjusting the size of the text is a bit tricky. You need to know the width of the string, But unless you use a mono-sized font where each character takes exactly the same amount of width, the length is not easy to calculate yourself. For example, you could render a div somewhere offscreen, with the same text, get its size, and do the calculation based on that.

3) One thing you may try out is to render the text to canvas and scale it to fit: Best method of scaling text to fill an HTML5 canvas

Community
  • 1
  • 1
Vladimir M
  • 4,403
  • 1
  • 19
  • 24
0

Here is an approach i use mostly to help me with the issue. Its not exactly what you want but might help you a bit. To change the font size , you need to use js. Here is a plugin you might find helpful : http://jquery-textfill.github.io/

.single-line-heading{
      width: 300px; 
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
<h2 class="single-line-heading">Hello this is a very long long long text and i reallly like it </h2>

It will show ... when the text is longer then your desired width..

Aslam
  • 9,204
  • 4
  • 35
  • 51