0

我正在尝试获得更长的 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 中的自动调整大小特别相关。如何让文本自动缩小以适应 986 像素？

先感谢您。

4

2 回答 2

0

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

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

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

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

编辑：

这是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;
}
于 2013-06-07T15:35:45.267 回答
0

您应该修改您的 CSS 以使背景成为

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

然后将您的图像编辑为更高。如果有意义的话，向上重复顶部。然后根据行高删除高度限制和样式。

于 2013-06-07T14:38:26.883 回答