ホームページ > 記事 > ウェブフロントエンド > 複数行のテキストがオーバーフローすると省略記号が表示されます (…)
<a href="http://www.php.cn/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="http://www.php.cn/wiki/868.html" target="_blank">text-</a><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>
:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>
属性。
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp
;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp
用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:
<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;
,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。
具体例子可以查看http://www.php.cn/
比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;
例如:
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://www.php.cn/) repeat-y; }
这里注意几点:
height高度真好是line-height
的3倍;
结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
IE6-7不显示content
内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用5ba58fdc612f1fc136f6b4bee7e3f862...54bdf357c58b8a65c66d7c19c8e4d114
去模拟;
要支持IE8,需要将::after
替换成:after
<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>
var module = document.getElementById("clamp-this-module"); $clamp(module, {clamp: 3});ただし、この属性は、アプリケーション
シナリオこのようなシナリオを実現するための
いくつかの方法を紹介します。効果 。
-webkit-line-clamp
は、ブロック要素に表示されるテキストの行数を制限するために使用されます。 この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。 <a href="http://www.php.cn/wiki/927.html" target="_blank"> display</a>
をエラスティックとして使用するために組み合わせる必要がある属性スケーリングボックス モデル
が表示されます。-webkit-box-orient
は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。
text-overflow: ellipsis;
を使用すると、複数行のテキストの場合に、範囲外のテキストを省略記号「...」で非表示にすることができます。 $(document).ready(function() { $("#wrapper").dotdotdot({ //configuration goes here }); });🎜🎜🎜 この属性は、WebKit ブラウザーまたはモバイル ブラウザー (主に WebKit コア) ブラウザーに適しています。 🎜🎜具体的な例については、http://www.php.cn/🎜🎜クロスブラウザ互換のソリューションを確認してください🎜🎜より信頼性が高く簡単な方法は、相対的に配置されたコンテナの高さを設定し、次の要素を含む要素で実装をシミュレートすることです。 ellipsis (...) ;🎜🎜例: 🎜🎜🎜css 🎜Code:🎜🎜🎜🎜🎜rrreee🎜🎜🎜ここでいくつかの点に注意してください:🎜
line-height
の 3 倍です。🎜🎜🎜🎜末尾を省略して半透明の PNG を使用して覆い焼き効果を作成したり、背景色; 🎜🎜🎜🎜IE6-7 content
コンテンツは表示されないため、IE6-7 と互換性を持たせるために、ebbf802241b2b0a9c23406902c7726e7...54bdf357c58b8a65c66d7c19c8e4d114
をシミュレートします 🎜🎜🎜🎜 IE8 をサポートするには、::after
を に置き換える必要があります。 :after
; 🎜🎜🎜🎜🎜JavaScript🎜ソリューション🎜 🎜js🎜を使用して、同様の作業を行うための実装も非常に簡単です。 : 🎜🎜1.Clamp.js🎜🎜ダウンロードとドキュメントのアドレス: http://www.php.cn/🎜使い方も非常に簡単です: 🎜🎜🎜js 🎜コード: 🎜🎜🎜🎜🎜rrreee🎜🎜🎜 🎜🎜2.🎜jQuery🎜plug-in-jQuery.dotdotdot🎜🎜これも非常に便利です: 🎜 🎜🎜js 🎜コード:🎜🎜🎜🎜🎜rrreee🎜🎜以上が複数行のテキストがオーバーフローすると省略記号が表示されます (…)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。