単一行テキスト表示オーバーフロー省略記号複数行のテキスト表示オーバーフロー省略記号

単一行テキストオーバーフロー省略記号

<!DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
  <メタ文字コード= " UTF-8 " > 
  <META NAME = " ビューポート"コンテンツ= " 幅=装置幅、初期の規模= 1.0 " > 
  <メタHTTP-当量= " X-UA-互換性のある"コンテンツ= " IE =エッジ" > 
  <タイトル>ドキュメント</ TITLE> 
  <スタイル> 
    ■は{ 
      幅:100pxに。
      背景:RGB(211128128 )。
      / *テキスト表示が1行にラップすることはできません設定します* / 
      ホワイト・スペース:NOWRAP;
       / * 定義された幅隠された内容を超える* / 
      オーバーフローを:隠された;
       / * 表示省略記号テキストオーバーフローがトリミングされたテキストを表す場合* / 
      テキストベースのオーバーフローを:省略記号; 
    }

   </スタイル> 
</ HEAD> 
<BODY> 
 <divのクラス = " ボックス" > 
   ラララララララララプルああ
  </ div> 
</ BODY> 
</ HTML>

複数行のテキスト表示オーバーフロー省略記号

<!DOCTYPE HTML> 
<HTML LANG = " EN " > 

<HEAD> 
  <メタ文字コード= " UTF-8 " > 
  <META NAME = " ビューポート"コンテンツ= " 幅=装置幅、初期の規模= 1.0 " > 
  <メタHTTP-当量= " X-UA-互換性のある"コンテンツ= " IE =エッジ" > 
  <タイトル>ドキュメント</ TITLE> 
  <スタイル> 
    ■は{ 
      幅:100pxに。
      フォント - サイズ:16pxに;  - 高さ:32PX;
      / *高さは、全体高の複数の行に設定されている場合* / 
      高さ:96PX; 
      RGB(:背景218182182 );
       / * ブロック要素内のテキストの行数表示* / 
      -webkitラインクランプ:3
       / * 弾性ストレッチボックスモデルの表示されるオブジェクトの特性と組み合わされなければならない   * / 
      表示:-webkit-ボックス;
       / *が設定されたプロパティまたはサブエレメント伸縮カートリッジ検索対象の配列と組み合わされなければなりません。* / 
      -webkit-ボックス-オリエント:縦;
       / * 定義された高さ隠されたコンテンツ超える   * / 
      オーバーフロー:隠された;
       / *   表示テキストは省略記号は、プルーニングテキスト表現オーバフローしたとき* / 
      テキストベースのオーバーフロー:省略記号; 
    }
   </スタイル> 
</ head>の
 
<BODY>
  <divのクラス = ボックス > 
    ラ・ラ・ラ・ラ・ラ・ラ・ラ・ラ・ラ・ラララプルああ
   </ div> 
</ BODY> 

</ HTML>

 

おすすめ

転載: www.cnblogs.com/SRH151219/p/11237974.html