CSSで長いテキストをトリミングする方法。 省略記号を追加して、高さ1行または複数行のテキストを切り抜きます。テキストにグラデーションを追加します。

Vlad Merzhevich

大きな対角線のモニターがますますアクセスしやすくなり、その解像度が絶えず向上しているという事実にもかかわらず、多くのテキストを収めるために限られたスペースでタスクが発生することがあります。 たとえば、これはサイトのモバイルバージョンや、回線数が重要なインターフェイスで必要になる場合があります。 このような場合、文の先頭のみを残して、長いテキスト行を切り捨てることは理にかなっています。 そのため、インターフェイスをコンパクトな形式にし、表示される情報の量を減らします。 実際の行のトリミングは、同じPHPを使用してサーバー側で実行できますが、CSSを使用すると、さらに簡単になります。さらに、たとえば、マウスカーソルをその上に置くと、いつでもテキスト全体を表示できます。 次に、架空のはさみでテキストをカットする方法を検討します。

実際、それはすべて、非表示の値でオーバーフロープロパティを使用することになります。 違いは、テキストの表示の違いにのみあります。

オーバーフローの使用

オーバーフロープロパティがすべての栄光のテキストでそれ自体を表示するには、値がnowrapの空白を使用してテキストの折り返しをキャンセルする必要があります。 これを行わないと、必要な効果が得られず、テキストにハイフネーションが追加され、全体が表示されます。 例1は、指定されたスタイルプロパティのセットを使用して長いテキストをトリミングする方法を示しています。

例1.テキストのオーバーフロー

HTML5 CSS3 IE Cr Op Sa Fx

この例の結果を図1に示します。 1.1。

米。 1.オーバーフロープロパティを適用した後のテキストのタイプ

図からわかるように、一般的に欠点は1つだけです。テキストに継続があることは明らかではないため、ユーザーはこれを認識しておく必要があります。 これは通常、グラデーションまたは省略記号を使用して行われます。

テキストにグラデーションを追加する

右側のテキストが終了していないことを明確にするために、透明から背景色へのグラデーションでオーバーレイすることができます（図2）。 これにより、テキストが徐々に解消される効果が生まれます。

米。 2.グラデーションテキスト

例2は、この効果を作成する方法を示しています。 要素自体のスタイルは実質的に同じままで、グラデーション自体は疑似要素とCSS3の後に::を使用して追加されます。 これを行うには、contentプロパティを介して空の疑似要素を挿入し、メインブラウザのプレフィックスが異なるグラデーションを適用します（例2）。 グラデーションの幅は幅によって簡単に変更できます。また、0.2の値を独自の値に置き換えることで透明度を調整することもできます。

例2.テキストのグラデーション

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

ディスクリート内のアルペジオがポリ列を変形させます。これは、超ポリフォニックファブリックのワンステップ垂直です。

この方法は、グラデーションをサポートしていないため、8.0までのInternetExplorerでは機能しません。 ただし、PNG-24画像を使用して、CSS3をあきらめ、グラデーションを昔ながらの方法にすることができます。

この方法は、背景が塗りつぶされている場合にのみ機能します。背景画像の場合、テキストのグラデーションが目立ちます。

テキストの最後に省略記号

切り取られたテキストの最後にグラデーションの代わりに省略記号を使用することもできます。 さらに、text-overflowプロパティを使用して自動的に追加されます。 古いバージョンのIEを含むすべてのブラウザで理解されており、このプロパティの唯一の欠点は、ステータスがまだ不明なことです。 このプロパティはCSS3に含まれているようですが、このプロパティを含むコードは検証に合格しません。

例3は、省略記号を追加する値ellipsisを指定したtext-overflowプロパティの使用を示しています。 テキストの上にマウスカーソルを置くと、テキスト全体が表示され、背景色で強調表示されます。

例3.テキストオーバーフローの使用

HTML5 CSS3 IE Cr Op Sa Fx

この例の結果を図1に示します。 3.3。

米。 3.省略記号付きのテキスト

これらの方法の大きな利点は、テキストが短く、指定された領域に完全に収まる場合、グラデーションと省略記号が表示されないという事実です。 そのため、テキストは画面に完全に表示されている場合は通常どおり表示され、要素の幅が狭くなるとクリップされます。

場合によっては、ブロックのコンテンツが要素の境界の外側に表示され、要素と重なって表示されます。 オーバーフロープロパティは、ブロック要素の動作を制御するために使用されます。これにより、ブロックの外側に流れるコンテンツの表示方法が決まります。

clipプロパティを使用して、要素を指定された寸法にクリップできます。

1.オーバーフロープロパティ

ブロックに高さや幅が明示的に設定されている場合、ブロック要素のコンテンツがブロックをオーバーフローする可能性があります。 高さを指定しない場合、ボックスが次の位置に配置されていない限り、ボックスはコンテンツに対応するように引き伸ばされます。 または位置：固定; ..。 テキストはブロックの高さ、画像は高さと幅でオーバーフローする可能性があります。

2.overflow-xプロパティ

このプロパティは、オーバーフローが発生した場合に、ブロック内のコンテンツの右端をどのように切り取るかを指定します。

構文：

Div（オーバーフロー-x：非表示;）

3.overflow-yプロパティ

このプロパティは、ブロック内のコンテンツの下端がオーバーフローした場合にどのように切り取られるかを指定します。

構文：

Div（オーバーフロー-y：非表示;）

4.クリッププロパティ

プロパティは、要素のどの部分を表示するかを決定します。 クリッピング後に表示されたままになる要素の部分は、クリッピング領域と呼ばれます。 クリッピングは、最初は完全に表示されている要素に適用されます。 このプロパティは、positionプロパティがabsoluteまたはfixedに設定されている要素に適用されます。

固定の高さと幅のブロック内に表示する必要がある任意の長さのテキストがあります。 この場合、テキストが完全に収まらない場合は、指定されたブロックに完全に収まるテキストを表示する必要があります。その後、省略記号が設定されます。

このタスクは非常に一般的ですが、同時に、見た目ほど簡単ではありません。

CSSの単一行テキストのオプション

この場合、text-overflow：ellipsisプロパティを使用できます。 この場合、コンテナにはプロパティが必要です オーバーフロー同等 隠れたまた クリップ

ブロック（幅：250px;空白：nowrap;オーバーフロー：非表示;テキスト-オーバーフロー：省略記号;）

複数行のCSSテキストのオプション

CSSプロパティを使用して複数行のテキストをトリミングする最初の方法は、疑似要素を適用することです ： 前と ： 後..。 まず、HTMLマークアップ

そして今、プロパティ自体

Box（overflow：hidden; height：200px; width：300px; line-height：25px;）。box：before（content： ""; float：left; width：5px; height：200px;）。box> *：first -子（float：right; width：100％; margin-left：-5px;）。box：after（content： "\ 02026"; box-sizing：content-box; float：right; position：relative; top： -25px;左：100％;幅：3em;マージン-左：-3em;パディング-右：5px;テキスト-整列：右;背景-サイズ：100％100％;背景：線形-グラデーション（右、rgba （255、255、255、0）、白50％、白）;）

もう1つの方法は、複数行のテキストの列幅を設定するcolumn-widthプロパティを使用することです。 ただし、この方法を使用すると、最後に省略記号が表示されません。 HTML：

ブロック（オーバーフロー：非表示;高さ：200px;幅：300px;）。block__inner（-webkit-column-width：150px; -moz-column-width：150px; column-width：150px; height：100％;）

CSSの複数行テキストの3番目の解決策は、ブラウザー用です。 Webkit..。 その中で、接頭辞が付いたいくつかの特定のプロパティを使用する必要があります -webkit..。 主なものは-webkit-line-clampで、これを使用すると、ブロックに表示する行数を指定できます。 ソリューションは美しいですが、限られたブラウザのグループで機能するため、かなり制限されています

ブロック（オーバーフロー：非表示;テキストオーバーフロー：省略記号;表示：-webkit-box; -webkit-line-clamp：2; -webkit-box-orient：vertical;）

複数行テキストのJavaScriptバリアント

ここでは、追加の非表示ブロックが使用され、最初にテキストが配置されます。その後、このブロックの高さが目的のブロックの高さ以下になるまで、一度に1文字ずつ削除されます。 そして最後に、テキストは元のブロックに移動します。

var block = document。 querySelector（ "。block"）、text = block。 innerHTML、clone = document。 createElement（ "div"）; クローン。 スタイル。 position = "絶対"; クローン。 スタイル。 可視性= "非表示"; クローン。 スタイル。 幅=ブロック。 clientWidth + "px"; クローン。 innerHTML =テキスト; 資料。 体。 appendChild（クローン）; var l =テキスト。 長さ-1; for（; l> = 0 &&clone。clientHeight>block。clientHeight;-l）（clone。innerHTML=text。substring（0、l）+ "...";）ブロック。 innerHTML = clone。 innerHTML;

これはjQueryプラグインの形式です。

（function（$）（var truncate = function（el）（var text = el .text（）、height = el .height（）、clone = el .clone（）; clone .css（（position： "absolute"、可視性： "hidden"、height： "auto"））; el .after（clone）; var l = text .length -1; for（; l> = 0 && clone .height（）> height; --l）（ clone .text（text .substring（0、l）+ "..."）;）el .text（clone .text（））; clone .remove（）;）; $ .fn .truncateText = function（）（これを返します。each（function（）（truncate（$（this））;））;）;）（jQuery））;

みなさん、こんにちは。私の名前はアンナブロックです。今日は、グラフィックプログラムを使用せずに画像を切り抜く方法について説明します。

これはどこで役に立ちますか？

まず第一に、画像付きのコンテンツが特定のブロックにクリップされない可能性が最も高いサイトです。

印象的な例：WordPressブログ。

記事の表紙を1：1（正方形）にしたいとします。 あなたの行動：

1. インターネットから適切な画像をダウンロードします。
2. Photoshopで希望の比率にトリミングします。
3. 記事を公開します。

サイトに入ると、期待した結果が表示されます。

しかし、Photoshopで写真を切り抜いて、インターネットからカバーとしてランダムな画像をアップロードするのを忘れたとしたら、どうなるでしょうか。 そうです、レイアウトが壊れます。 また、CSSをまったく使用していない場合は、HD解像度の画像がテキストのビュー全体と完全に重なる可能性があります。 したがって、CSSスタイルを使用して画像を切り抜くことができることが重要です。

これをCSSだけでなくSVGでも実装する方法のさまざまな状況を見てみましょう。

例1

background-imageで配置された画像を切り抜いてみましょう。 HTMLマークアップを作成しましょう

CSSのスタイリングに移ります。 background-imageを使用して、画像を追加し、画像の境界線を設定し、background-positionを使用して画像を中央に配置し、background-sizeを設定します。

Jpg）; 背景位置：中央中央; 背景サイズ：カバー; 幅：300px; 高さ：300px; ）

これは、画像をトリミングするための最初で最も簡単な方法でした。 次に、2番目の例を見てみましょう。

例2

同じボックスコンテナがあり、その中に、これからスタイルを設定する画像を含むimgタグがあるとします。

また、作成するオブジェクトを基準にして画像を中央に配置します。 そして、めったに使用されないプロパティ、object-fitを使用します。

ボックス（位置：相対;オーバーフロー：非表示;幅：300px;高さ：300px;）。box img（位置：絶対;上：50％;左：50％;変換：変換（-50％、-50％）;幅：300px;高さ：300px;オブジェクトフィット：カバー;）

これが私の意見では最良の方法です。 投稿に非常に異なる比率で画像を使用する場合は、ブログに最適です。

HTMLとCSSの詳細については、こちらをご覧ください。

例3

画像をSVG要素に挿入すると、現時点で画像のトリミングを作成することもできます。 例として円を見てみましょう。 タグを使用してSVGを作成できます。 内側に円タグとパターンタグを持つ境界線svgタグを作成します。 パターンタグに画像タグを書き込みます。 その中で、xlink：href属性を指定し、画像を追加します。 また、幅と高さの属性も追加します。 しかし、それだけではありません。 塗りつぶしの値を追加する必要があります。 作業を完了するために、補助的なpreserveAspectRatio属性をimageタグに追加します。これにより、画像が円の周りの「始点と終点」に塗りつぶされます。

このメソッドをユニバーサルと呼ぶことはできません。 ただし、例外的な場合に使用できます。 たとえば、ブログのトピックに触れた場合、理想的には、そのような方法は、記事を書いている著者のアバターに適合する可能性があります。

HTMLとCSSの詳細については、こちらをご覧ください。

結果：
Webサイトで画像を切り抜く3つの方法について説明しました。imgタグを使用してbackground-imageを使用し、imageタグを使用してビットマップを埋め込むことでsvgパターンに関連付けます。 SVGを使用して画像をトリミングする他の方法を知っている場合は、コメントで共有してください。 私だけでなく、他の人にもそれらについて学ぶことは役に立ちます。

オンラインのFrontendHelpで、コーディングやフロントエンド開発の質問を専門家に尋ねることを忘れないでください。

この記事では、 3つの迅速で簡単なCSSテクニックページに画像の一部のみを表示するために使用できます。

ここで使用されるすべての方法は、実際には数行しか必要としません CSSコード。 しかし、これは文字通りの意味での割礼ではありません（ CSSまだできません）、画像の見たい部分だけを非表示にして表示します。

これらの手法は、画像を特定のサイズにしたい場合、たとえば、ニュースセクションなどにサムネイル（画像の縮小コピー）を作成したい場合に非常に役立ちます。

テクニック1-負のマージンを使用する（ 負のマージン)

負のマージンを使用したくない場合は、この手法を使用することをお勧めします №2 ..。 これには、特定の幅と高さを持つ親（段落）が含まれます。 この段落にはプロパティがあります ポジショニング相対として指定されます。 幅と高さによって、表示されるフィールドの寸法が決まります。 そして、段落内に配置された画像には、プロパティがあります ポジショニング絶対に設定します。 次に、プロパティを使用できます 上上）と 左画像のどの部分を表示するか、どの部分を表示しないかを決定するプロセスで、必要に応じて画像を配置します。

HTML前の手法のコードと同じです。

テクニック3-スライスプロパティの使用（ クリッププロパティ)

このテクニックは最も簡単なはずです。 クリッププロパティ表示される要素の部分を定義します。 完璧な解決策のように聞こえますが、 1つの障害: クリップされた要素絶対に配置する必要があります。 要素を使用できるようにするには、要素を追加し、画像の表示領域のサイズを計算し、このサイズを親に追加し、親を使用する必要があります...多くの作業はそうではありませんそれ？

ああ、もう1つの問題：切り取られた要素のサイズは切り抜きのサイズに縮小されませんが、元のサイズのままです（切り抜きの外側の画像は単に非表示になります）。 ビューポートを親の左上隅に移動するには、絶対位置を使用する必要があります。

しかし、言及しないでおくことはできません スライスプロパティ..。 そして再びコード...