menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

text-overflow【CSS3リファレンス】

  • CSS

text-overflow

こんにちは(・∀・)

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはtext-overflowです。

概要

text-overflowプロパティは要素内に収まりきらないテキストがある場合、見えているテキストの最後尾に「...」を表示させてそのテキストに続きがある事を示す事が指定できるプロパティです。


.sample {
  text-overflow: ellipsis;
}
適用要素

ブロックレベル要素

指定できる値
ellipsis
要素内に収まりきらず表示できないテキストがある場合「...」を表示
clip
要素内に収まりきらず表示できないテキストがあってもそのまま表示
初期値

clip

サンプル
HTML

<p class="demo1">
要素の大きさを超えたテキスト量がある場合はそのテキストには続きがあるという事が表示できると親切ですね。
</p>
<p class="demo2">
要素の大きさを超えたテキスト量がある場合はそのテキストには続きがあるという事が表示できると親切ですね。
</p>
CSS

.demo1 {
  text-overflow: ellipsis;
  overflow: hidden;/*これが無いと親要素をはみ出て表示されてしまいます。*/
  white-space: nowrap;/*これが無いと改行されてしまいます。*/ 
}
.demo2 {
  text-overflow: clip;
}
Result

要素の大きさを超えたテキスト量がある場合はそのテキストには続きがあるという事が表示できると親切ですね。

要素の大きさを超えたテキスト量がある場合はそのテキストには続きがあるという事が表示できると親切ですね。


関連リンク

CSS3リファレンス

  • カテゴリー:CSS