menu
menu

text-overflow【CSS3リファレンス】 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook6
  • はてなブックマーク3
  • Google+2
  • Pocket0
  • Twitter0

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,
.demo2 {
	padding: 10px;
	overflow: hidden; /*これが無いと親要素をはみ出て表示されてしまいます。*/
	white-space: nowrap; /*これが無いと改行されてしまいます。*/ 
}
.demo1 {
	text-overflow: ellipsis;
}
.demo2 {
	text-overflow: clip;
}
  • カテゴリー:CSS
  • facebook6
  • はてなブックマーク3
  • Google+2
  • Pocket0
  • Twitter0