0

より長いワードプレスの投稿タイトルを取得して、サイズを自動的に縮小して背景画像の幅に合わせようとしています (これは 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 に収まるようにテキストを自動縮小するにはどうすればよいですか?

前もって感謝します。

4

2 に答える 2

0

指定した幅に収まるようにテキストを自動スケーリングすることはできません。「em」、「rem」、またはその他の相対的なテキストのスケーリング単位を使用してテキストを再スケーリングできますが、これらはすべてテキストの幅ではなく高さを変更します。スケーリングの代わりに、タイトルに自動省略記号を追加するのはどうですか?

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

タイトルの見出しが 986 ピクセルを超えると、「...」と表示されます。これは非常に単純な解決策です。

これが一般的な問題である場合は、font-size を小さくすることもお勧めします。

編集：

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 に答える