4

現在、テキスト ボックスを垂直方向に制限し、省略記号を追加するには、line-clamp と box-orient を使用する webkit css3 ソリューションしかありません。

デモ (サファリまたはクローム): http://jsfiddle.net/ArKeu/136/

現在、これは他の場所ではサポートされておらず、プレフィックスを使用していません。だから私の質問は、純粋なjavascriptでこれを簡単に行うことができるかどうかです. 要するに、複数の行で文を流し、省略記号を追加しながら数行後に停止します。

ご協力いただきありがとうございます。

4

1 に答える 1

9

この回答からのコードを純粋なJSになるように変更しました。行数ではなく、ボックスの高さを指定します。行数に を掛けることで、行数から高さを簡単に計算できますline-height。

HTML

<div id="fos">
    <p>text here</p>
</div>​

JavaScript

var container = document.getElementById("fos");
var containerHeight = container.clientHeight;
var para = container.children[0];

while (para.clientHeight > containerHeight) {
    para.innerText = para.innerText.replace(/\W*\s(\S)*$/, '...');
}

デモ

于 2012-08-08T02:31:34.863 に答える