ホームページ > 記事 > ウェブフロントエンド > 2行を超えるCSS部分の省略記号の解決策
2行を超えるCSS部分の省略記号の解決策
- 高洛峰オリジナル
- 2017-03-16 09:56:202487ブラウズ
今日何かを作っているときにこの問題に遭遇し、Baiduでまとめたところ、この結果が得られました。
まず、CSS の 3 つの プロパティ を知る必要があります。
:hidden; //オーバーフローテキストは非表示になります
text-overflow:ellipsis; //オーバーフローは省略記号で表示されます
white-space:nowrap; //オーバーフローは折り返されません
この 3 つは CSS の基本的な属性なので覚えておく必要があります。 しかし、3 番目の属性は 1 行しか表示できず、ここでは使用できません。では、複数行が表示される場合はどうなるでしょうか。 css3 はこの問題を次のように解決します:display:-webkit-box; // オブジェクトをエラスティックスケーリングボックスモデルとして表示します。
-webkit-box-orient:vertical; //子要素を上から下に垂直に配置します（伸縮ボックスの子要素の配置を設定します） -webkit-line-clamp:2; //この属性はありませんCSS 仕様の属性を使用する場合は、表示される行数を示すために上記の 2 つの属性を組み合わせる必要があります。 最終的な CSS スタイルは次のとおりです: overflow:hidden; text-overflow:ellipsis;display:-webkit-box -webkit-box-orient:vertical;-webkit -line -clamp:2; 2 行または 3 行のコンテナの場合、CSS のみを使用してこのメソッドを実装することは不可能です。 ではプログラムで単語を切り詰めて出力する方法と、js を使って単語数を判断して切り詰める方法の2通りの方法が用意されています。
JS のデモは次のとおりです:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
.demo{width:100px;}
</style>
</head>
<body>
<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
<script>
// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，
// 直接用id获取domo对象
var oBox=document.getElementById('demo');
// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+'...';
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>
以上が2行を超えるCSS部分の省略記号の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。