複数行のテキストがオーバーフローすると省略記号が表示されます (…)

<a href="//m.sbmmt.com/wiki/868.html" target="_blank">text-</a><a href="http://www.php%5D%20%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E3%82%92%E5%85%A8%E5%93%A1%E3%81%8C%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8F%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%20.cn/wiki/923.html" target="_blank">オーバーフロー<code><a href="//m.sbmmt.com/wiki/868.html" target="_blank">text-</a><a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow</a>:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度<a href="//m.sbmmt.com/wiki/835.html" target="_blank">width</a>属性。

css 代码:

1. overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

   ログイン後にコピー

但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。

WebKit浏览器或移动端的页面

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：

1. <a href="//m.sbmmt.com/wiki/927.html" target="_blank">display</a>: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

3. text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

css 代码:

1. overflow : hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

   ログイン後にコピー

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

具体例子可以查看//m.sbmmt.com/

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

例如：

css 代码:

1. 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(//m.sbmmt.com/) repeat-y;
   }

   ログイン後にコピー

这里注意几点：

1. height高度真好是line-height的3倍；

2. 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；

3. IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；

4. 要支持IE8，需要将::after替换成:after

   :ellipsis 属性
を使用して、1 行のテキスト内で省略記号 (…) のオーバーフロー表示を実現します。もちろん、ブラウザによっては幅 <a href="//m.sbmmt.com/wiki/835.html" target="_blank">width</ol> 属性を追加する必要もあります。

css

Code:

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

ログイン後にコピー
ただし、この属性は、アプリケーション

シナリオこのようなシナリオを実現するための
いくつかの方法を紹介します。効果 。

WebKit ブラウザまたはモバイル ページ WebKit ブラウザまたはモバイル端末 (WebKit コアを備えたほとんどのブラウザ) でのページの実装は、WebKit の CSS 拡張属性 (WebKit はプライベート属性) を直接使用できます。< code>-webkit- line-clamp; 注: これはサポートされていない WebKit プロパティであり、CSS ドラフト仕様には含まれていません。 -webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。 この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。

一般的な組み合わせ属性:
<a href="//m.sbmmt.com/wiki/927.html" target="_blank"> display</ol>: -webkit-box; オブジェクト

をエラスティックとして使用するために組み合わせる必要がある属性スケーリングボックス モデル

が表示されます。
-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。

text-overflow: ellipsis; を使用すると、複数行のテキストの場合に、範囲外のテキストを省略記号「...」で非表示にすることができます。

css
1. Code:
🎜🎜🎜

$(document).ready(function() {
$("#wrapper").dotdotdot({
//configuration goes here
});
});

ログイン後にコピー
🎜🎜🎜 この属性は、WebKit ブラウザーまたはモバイル ブラウザー (主に WebKit コア) ブラウザーに適しています。 🎜🎜具体的な例については、//m.sbmmt.com/🎜🎜クロスブラウザ互換のソリューションを確認してください🎜🎜より信頼性が高く簡単な方法は、相対的に配置されたコンテナの高さを設定し、次の要素を含む要素で実装をシミュレートすることです。 ellipsis (...) ;🎜🎜例: 🎜🎜🎜css 🎜Code:🎜🎜🎜🎜🎜rrreee🎜🎜🎜ここでいくつかの点に注意してください:🎜
🎜🎜高さ これは本当に良いです。line-height の 3 倍です。🎜🎜🎜🎜末尾を省略して半透明の PNG を使用して覆い焼き効果を作成したり、背景色; 🎜🎜🎜🎜IE6-7 content コンテンツは表示されないため、IE6-7 と互換性を持たせるために、<span を使用するなどしてコンテンツにタグを追加できます。 class="line-clamp">...</span> をシミュレートします 🎜🎜🎜🎜 IE8 をサポートするには、::after を に置き換える必要があります。 :after; 🎜🎜🎜🎜🎜JavaScript🎜ソリューション🎜 🎜js🎜を使用して、同様の作業を行うための実装も非常に簡単です。 : 🎜🎜1.Clamp.js🎜🎜ダウンロードとドキュメントのアドレス: //m.sbmmt.com/🎜使い方も非常に簡単です: 🎜🎜🎜js 🎜コード: 🎜🎜🎜🎜🎜rrreee🎜🎜🎜 🎜🎜2.🎜jQuery🎜plug-in-jQuery.dotdotdot🎜🎜これも非常に便利です: 🎜 🎜🎜js 🎜コード:🎜🎜🎜🎜🎜rrreee🎜🎜

以上が複数行のテキストがオーバーフローすると省略記号が表示されます (…)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。