☰

コンテンツが広すぎる場合は、HTML タグに省略記号 (...) を挿入します。質問する

tag-icon • tag-icon javascript html ellipsis elasticlayout
コンテンツが広すぎる場合は、HTML タグに省略記号 (...) を挿入します。質問する

ブラウザ ウィンドウのサイズが変更されると幅が変わる、伸縮自在のレイアウトの Web ページがあります。

このレイアウトには、h2長さが可変の見出し ( ) があります (実際には、私が制御できないブログ投稿の見出しです)。現在、見出しがウィンドウよりも幅が広い場合は、2 行に分割されます。

現在の画面/コンテナの幅でテキストが 1 行に収まらない場合は、見出しタグの innerHTML を短縮し、「...」を追加する、jQuery などを使用した、エレガントでテスト済みの (クロスブラウザの) ソリューションはありますか?

ベストアンサー1

1行のテキストを切り捨てる次のCSSのみのソリューションは、以下にリストされているすべてのブラウザで機能します。http://www.caniuse.com執筆時点では、Firefox 6.0 を除いて JavaScript はサポートされていません。複数行テキストの折り返しや Firefox の以前のバージョンをサポートする必要がない限り、JavaScript はまったく不要であることに注意してください。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Firefoxの以前のバージョンのサポートが必要な場合は、この他の質問に対する私の答え。

おすすめ記事