CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のtext-overflowプロパティでテキストのはみ出しを処理する方法

CSS3のtext-overflowプロパティは、ボックスからあふれて表示できなかったテキストを、ユーザーに対してどのように知らせるかを指定するためのプロパティです。長い文章を1行で表示したい場合などに、末尾を「…（省略記号）」で切り詰めるといった表現を簡単に実現できます。

text-overflowを機能させるための前提条件

text-overflowプロパティを正しく動作させるには、対象の要素に以下の設定が必要です。

  • white-space: nowrap; … テキストを折り返さず1行で表示する
  • overflow: hidden; … ボックスからはみ出た部分を非表示にする
  • widthなどによる幅の指定 … あふれる境界線を作る

主な値としては、あふれた部分を単純に切り取るclipと、末尾に省略記号（…）を表示するellipsisがあります。

サンプルコード

以下は、CSS3でテキストのオーバーフローを処理するコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    border: 1px solid #3008c0;
    margin: 10px;
    padding: 10px;
}
.clip {
    text-overflow: clip;
}
.ellipsis {
    text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>テキストオーバーフローの処理例</h1>
CLIP（切り取り）:
<div class="clip">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
ELLIPSIS（省略記号）:
<div class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSS3のtext-overflowプロパティでテキストのはみ出しを処理する方法

clipを指定した要素では、テキストがボックスの端でそのまま切断されて表示されます。一方、ellipsisを指定した要素では、収まりきらなかった部分が「…」に置き換えられ、テキストが続いていることが視覚的に伝わります。

  1. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;

  2. Excelで文字あふれ（テキストのオーバーフロー）を防ぐ方法【3つの対処法】

    文字あふれ（テキストのオーバーフロー）は、セルから文字がはみ出してしまうことで、スプレッドシート全体の見栄えを損なう原因になります。隣のセルに文字が隠れて読めなくなったり、レイアウトが崩れたりと、作業の妨げにもなりかねません。Microsoft Excelでは、いくつかの簡単な操作でこの問題を解消でき、すっきりとした見やすい表に仕上げることができます。 Excelにおける文字あふれとは？ 文字あふれとは、その名の通り、セルに入りきらない文字がセルの外にはみ出してしまう現象のことです。Excelのセル幅の初期値は「8.43」（標準フォントでの文字数）とかなり狭く設定されているため、長いテキスト