<< タイプライター風文字 ニュースティッカー javascript | TOP | cssTextプロパティ >>

2014年01月09日

text-overflowプロパティ 省略記号に転換（…）

スポンサード　リンク

 表示領域から、はみ出した文字列を省略記号に転換（…）
text-overflow：ellipsis；

ブロック要素に指定した幅を、超えたテキストを切り取り、代わりに
省略符号（…）を表示します。

① text-overflow : ellipsis ;

サイトやブログをJavaScriptサンプル を使って動きのあるページに、スタイルシートで 見栄え良く装飾

② text-overflow : ellipsis ;　"スタイルシート"の前で改行

サイトやブログをJavaScriptサンプル を使って動きのあるページに
スタイルシートで 見栄え良く装飾

③ text-overflow : clip ;

サイトやブログをJavaScriptサンプル を使って動きのあるページに、スタイルシートで 見栄え良く装飾

④ text-overflow : ellipsis ; 　SPAN要素に適用

サイトやブログをJavaScriptサンプルを使って動きのあるページに、スタイルシートで 見栄え良く装飾

イオンのオンラインショッピングサイト ～ おうちでイオン　イオンショップ ～
★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円～容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>text-overflowプロパティ</title>
 <style type="text/css">
.pClip, .pEllipsis, .wSpace{
    width: 325px; /* ボックス 横幅 */
    border: 1px solid skyblue; /* ボーダー : 幅,線種,色 */
    overflow: hidden; /* はみ出た部分を表示しない */
    white-space: nowrap; /* テキストの自動改行を禁止 */
       }
.pEllipsis{
    text-overflow: ellipsis; /* 省略符号を表示する */
     }
.pClip{
    text-overflow: clip; /* 省略符号を表示しない */
     }
.wSpace{
    white-space: normal; /* 規定値に戻し 自動改行を行う */
    text-overflow: clip; /* 省略符号なし*/
     }
.sPan{ color:red;     /* SPAN要素 */
   text-overflow: ellipsis;white-space: nowrap;
   display: block; overflow: hidden;
      }
</style>
</head>
<body>
  <p class="pEllipsis"><!--①-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、スタイルシートで 見栄え良く装飾</p>
  <p class="pEllipsis"><!--②-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、<br />スタイルシートで 見栄え良く装飾</p>
  <p class="pClip">    <!--③-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、スタイルシートで 見栄え良く装飾</p>
  <p class="wSpace">   <!--④-->
サイトやブログをJavaScript<span class="sPan">サンプル
を使って動きのあるページに、スタイルシートで</span> 見栄え良く装飾</p>
</body>
</html>
text-overflowプロパティ
指定した表示領域から溢れた(overflow)テキストを切り取り
残るテキストの文末に省略記号（…）「三点リーダ」を付け加えます。
 値の指定
text-overflow: ellipsis; /* 省略符号を表示する */
text-overflow: clip;     /* 省略符号を表示しない */
付帯する　ＣＳＳの指定
white-space: nowrap; で、要素内のテキストの自動折り返しを禁止して
overflow: hidden;により、表示領域からはみ出したテキストを隠し、そして
text-overflow: ellipsis; で、はみ出した部分を省略記号で代替表示します。
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
SPAN要素などのインラインレベル要素には、display: block;を付け加えます。
white-space プロパティ
 連続する複数のスペース、タブを1つの半角スペース（空白）にまとめるか、改行を空白に変換するか
要素の中の文字列を、ボックスの端まできたら自動折り返しするか、 指定する際に使用します。
white-space
overflow プロパティ
  ブロック要素に指定した横幅・高さの 範囲から内容がはみ出した場合の
内容の表示方法を指定します
初期値は「visible」で、はみ出した内容も表示します。
overflow
タグ：white-spaceプロパティ overflow プロパティ text-overflowプロパティ text-overflow: ellipsis;
posted by javaScript at 23:19 | 大阪 ☁ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。