レスポンシブ レイアウトの省略記号を使用して HTML コンテンツを切り詰める方法

レスポンシブ レイアウトのための省略記号を使用した HTML コンテンツの切り詰め

Web デザインの動的な世界では、可変コンテンツ幅の管理が課題になることがよくあります。見出しやその他のテキスト要素が使用可能なコンテナーの幅を超えると、望ましくない行の折り返しが発生する可能性があります。より洗練されたプレゼンテーションを実現するには、コンテンツを適切に切り詰め、必要に応じて省略記号 (...) を表示するソリューションを見つけることが不可欠です。

CSS ベースの切り詰め

幸いなことに、最新の CSS は簡単な解決策を提供します。次の CSS クラスを関連タグに適用すると、ほとんどの主要なブラウザでサポートされている、視覚的に魅力的な切り捨てを実現できます。

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

この CSS コードは、テキストを強制的に 1 行 (空白) のままにします。 、余分なコンテンツを非表示にすることでオーバーフローを防ぎ (オーバーフロー)、省略記号でテキストを切り詰めます (テキスト オーバーフロー)。

注: Firefox 6.0 は例外であり、この手法はサポートされていません。

jQuery の代替案 (複数行の切り詰め)

複数行のテキストまたは以前の Firefox バージョンのサポートが必要な場合は、jQuery ベースのソリューションが必要になる場合があります。ただし、このアプローチは Web サイトに不要なオーバーヘッドを追加するため、一般的に推奨されません。

以上がレスポンシブ レイアウトの省略記号を使用して HTML コンテンツを切り詰める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。