缩放文本以适合背景图像

Question

我正在尝试获得更长的wordpress帖子标题，以自动缩小其大小以适应背景图像的宽度（固定为986px）。目前，当标题太长时，最后的单词将在句子结尾处被切断。请参阅以下网站，例如： http://www.nursingassistantdegree.com/earning-a-certified-nursing-assistant-degree-can-help-break-the-single-mom-poverty-cycle/

CSS代码如下。

.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;}

我见过类似的主题，但没有一个与CSS中的自动调整大小有关。如何让文本自动缩小以适应986px？

提前谢谢你。

Answer 1

你应该修改你的css背景为

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

然后将图像编辑得更高。如果有意义，重复向上。然后使用线高度删除高度限制和样式。

Answer 2

您无法自动缩放文本以适合指定的宽度。您可以使用“em”，“rem”或其他相对文本缩放单位重新缩放文本，但所有这些都会更改文本高度，而不是文本高度。如何在标题中添加自动省略号，而不是缩放？

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

如果标题标题扩展超过986px，它将显示“...”这是一个非常简单的解决方案。

如果这是一个常见问题，也建议减小字体大小。

编辑：

以下是FF的快照。这就是我添加的内容。我没有改变字体属性。但如果你愿意，你可以减少它。您需要3个新属性：text-overflow, overflow, white-space。白色空间尤为重要。

快照：

更新2：

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