いくつかのソリューションの省略記号を表示するには長すぎるCSS

テキスト(方法A)のシングルライン:

  • 構文:
  • テキストオーバーフロー:クリップ| 省略記号
  • パラメータ:
  • クリップ:省いマーク(...)表示されますが、単純にカットされていない(このパラメータのクリップは一般的に使用されていません!)
  • 省略記号:指定されたオブジェクトのテキストオーバーフロー内の設定またはタグが省略されているかどうかを取得し(...):マーキング対象テキストオーバーフロー(...)説明を省略ディスプレイ。最大の欠点:テキストのオーバーフロー:FFプロパティで省略記号は効果はありません。
 /* 内容过长显示成省略号(内容显示为一行) */
 white-space: nowrap;/*设置不换行*/
 overflow: hidden; /*设置隐藏*/ text-overflow: ellipsis; /*设置隐藏部分为省略号*/ 

複数行のテキスト(方法II):

WebKitのブラウザまたはページのモバイル終わり:

  • ページのWebKitのブラウザやモバイル端末(ほとんどのWebKitブラウザカーネル)を実装するのは簡単ですし、直接使用することができるのWebKitの拡張属性をCSS -webkit-ラインクランプ(WebKitが私有財産である);注:これは、プロパティ(サポートされていないWebKitのプロパティ)標準化されていない、それがドラフトCSSの仕様には表示されません。

  • テキスト要素を制限するための-webkitラインクランプブロックの行数が表示されます。この効果を達成するためには、他のプロパティのWebKitの組み合わせが必要

  /* 内容过长显示两行,多余为省略号 */
  text-overflow:ellipsis;/*设置隐藏部分为省略号*/
  overflow: hidden;/*设置隐藏*/ display: -webkit-box; -webkit-line-clamp: 2;/*设置显示行数,此处为2行,可设置其他数字*/ -webkit-box-orient: vertical; 
  • このプロパティは、適切なWebKitのブラウザまたは携帯端末(主にWebKitのコア)ブラウザです。クロスブラウザの互換性ソリューション:

第三の方法:

最も単純なものは、アナログ素子で実装高さ位置は、省略記号(...)を含む反対側容器が提供される、より信頼性があり、かつ

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden; } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y; } 
  • 注意:

素敵な高さの高さの行の高さは3倍である。有用な省略PNGの端部は、半透明効果ドッジ製、又は背景色を設定し、IE6-7含有量がそれほどIE6-7適合するように、コンテンツを表示しませんなどのように、タグの内容を追加します。

<span class="line-clamp">...</span> 

シミュレートするには、IE8をサポートするために、あなたは交換した後::する必要があります後、JavaScriptプログラム:

JSはまた、上記の考え方に基づいてシミュレートするために使用することができ、実装は、いくつかの成熟したガジェットの同様の作業を行うことが推奨され、非常に簡単です:1.Clamp.js

:ドキュメントと住所ダウンロードhttps://github.com/josephschmitt/Clamp.jsを。使用することは非常に簡単です:

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3}); 

2.jQueryプラグ-jQuery.dotdotdot

$(document).ready(function() {
 $("#wrapper").dotdotdot({ // configuration goes here }); }); 
  • 、1534147975:この記事は見るためにラインで自分の人々の実践のための方法を説明するため、一部の抜粋がある、唯一の侵害はQQに連絡してください場合は、心の中でより多くのを見て自分自身を思い出させることを意図し自分自身の学習、コンテンツとマルチ参照要約のための収入をまとめたものですご質問がある場合、あなたはまた、時間のQQに連絡することができます。為替へようこそ。

おすすめ

転載: www.cnblogs.com/sinceForever/p/11350332.html