#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. text-style5

Text overflow ellipsis

長い文字列を三点リーダー(…)で省略

長いテキストを三点リーダー(…)で省略する

例1:安心立命とは、天命に身を任せて心を安らかに保ちつまらぬ事に動じないこと。どんな場所でも迷わず心が落ち着いていること。信仰によって心を安らかに保ち、どんな事にも心を乱されないこと。

<p class="sample1">例1:安心立命とは、天命に身を任せて心を安らかに保ちつまらぬ事に動じないこと。どんな場所でも迷わず心が落ち着いていること。信仰によって心を安らかに保ち、どんな事にも心を乱されないこと。</p>
.sample1{
   width: 450px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

overflow: hidden; で、領域(width: 450px;)をはみ出した文章を見えないようにします。
white-space: nowrap; で、改行されないようにします。
text-overflow: ellipsis; で、はみ出た文章を省略し(…)三点リーダーを表示します。

上記CSSはどのブラウザでも対応しているので問題無く使用できますが、複数行になる場合は使用できません。

CSSで複数行を三点リーダーで省略する

例2:安心立命とは、天命に身を任せて心を安らかに保ちつまらぬ事に動じないこと。どんな場所でも迷わず心が落ち着いていること。信仰によって心を安らかに保ち、どんな事にも心を乱されないこと。 安心立命とは、天命に身を任せて心を安らかに保ちつまらぬ事に動じないこと。どんな場所でも迷わず心が落ち着いていること。信仰によって心を安らかに保ち、どんな事にも心を乱されないこと。

.sample2{
   position: relative;
   height: 60px;
   overflow: hidden;
   line-height: 20px;
}
.sample2:before, .sample2:after {
   position: absolute;
   background: #ffffff;
}
.sample2:before {
   content: "…";
   bottom: 0;
   right: 0;
}
.sample2:after {
   content: "";
   width: 100%;
   height: 100%;
}

heightとline-heightを指定して何行表示するかを決め、before,after要素を使って(…)の表示・非表示をしています。
文字列の最後をbefore要素で常に(…)で隠し、コンテンツの幅よりも文が短くなった場合のみafter要素が見えるようになり(…)を覆って表示を消します。

参考:CSS,JS,PHPで文の省略をして末尾を…にする色々な方法

省略した文章をツールチップで全文表示する

タグのtitle属性に表示したい文章をダブルクォーテーションで括ると、マウスオーバーでツールチップを表示します。
文章が長い場合、ブラウザが判断しある程度の長さで自動的に改行されますが、任意の位置で改行を入れる事もできます。(下の例3の文にマウスを当ててみて下さい。)

例3:円満具足とは、十分に満ち足りていて不足がない事。すべてが不足なく備わっている事。また、顔つきが穏やかで優しい事。

<p class="sample3" title="例3:&#10;円満具足とは、十分に満ち足りていて不足がない事。&#10;全てが不足なく備わっている事。&#10;また、顔つきが穏やかで優しい事。">例3:円満具足とは、十分に満ち足りていて不足がない事。すべてが不足なく備わっている事。また、顔つきが穏やかで優しい事。</p>

改行したい箇所に、数値文字参照のどれかを入れれば改行されます。(例3では&#10;を使用しています。)

改行コード 数値文字参照(10進数) 数値文字参照(16進数) 説明
CR &#13; &#x0D; Mac(OS9まで)のテキストファイル
LF &#10; &#x0A; Unix, Linux, MacOS X 以降のテキストファイル
CR+LF &#13;&#10; &#x0D;&#x0A; Windowsや昔のMS-DOSのテキストファイル