缩放文字以适合背景图像

Question

I am trying to get longer wordpress post titles to automatically scale down their size to fit into width of the backround image (which is fixed at 986px). Currently, when a title is too long, the last words will get cut off towards the end of the sentence. Please see the below site for example: http://www.nursingassistantdegree.com/earning-a-certified-nursing-assistant-degree-can-help-break-the-single-mom-poverty-cycle/

The CSS code is below.

.networkNews_bg{ background:url(images/network_news_bg.png) no-repeat 0 0; width:986px; height:82px;}
.networkNews_bg h2{ font:bold 35px/82px "Myriad Pro"; color:#2a2c2e; padding:0 20px;}

I have seen similar topics, but none that are specifically related to auto-sizing in a CSS. How can I get the text to auto-scale down to fit within the 986px?

Thank you in advance.

Answer 1

You should modify your css for the background to be

background: url(images/network_news_bg.png) bottom no-repeat;

and then edit your image to be much taller. repeating the top upward if that makes sense. Then remove the height restriction and style accordingly with line height.

Answer 2

You can't autoscale text to fit within a specified width. You can rescale text using "em," "rem" or other relative text scaling unit but all of this changes the text height, not its width. Instead of scaling, how about adding an automatic ellipsis to your title?

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 986px;
  height: 20px;
  line-height: 20px;
}

If a title heading expands past 986px, it will show "..." This is a very simple solution.

Decreasing the font-size is also recommended if this is a common issue.

EDIT:

Here is the snapshot from FF. This is what I added. I did not change the font properties. But you can decrease it if you want. You need 3 new properties: text-overflow, overflow, white-space . The white-space is especially important.

Snapshot:

Update 2:

networkNews_bg h2 {
        text-overflow: ellipsis;
        overflow: hidden;
        wite-space: nowrap;
        color: #2A2C2E;
        font: 35px/82px "Myriad Pro";
        padding: 0 20px;
}