divの高さに関してテキストを切り詰めるには？

Question

高さが192pxのdivがあります。 div内のテキストを切り捨てて、最後に...と表示したいとします。今すぐ大きなテキストのため、スナップショットに示されているようにボタンがクリッピングされています。 これはhtmlタグを追加すると発生します。誰もが

を助けることができますか？

Answer 1

には、以下のCSSを試してみてください。複数行の場合はJavaScriptが必要です。

Answer 2

使用overflow: hidden ...より多くのコードを投稿すると、より具体的になります。 、あなたが必要とするしかし最後に...表示するに従ってください

<div style="overflow:hidden">your code</div> 

のようにdivの中に隠されたCSSプロパティ： - J-man86ちょうど今オーバーフローを追加し、簡単な解決策があり、テキストを非表示にするには

Answer 3

を編集javascriptでdivの内容を取得し、そこでsubstr関数を使用します。これは、divに表示できる文字の数を把握するための試行錯誤のソリューションになります。シングルライン用

text-overflow: ellipsis; 
overflow: hidden; 
whitespace: no-wrap; 

これだけ作品：

Answer 4

前述のとおり、問題を解決する最も簡単な方法は、overflow:hiddenをdivのCSSスタイルに追加することです。

しかし、これは折り返しの末尾に省略記号（ドット）を追加するのに役立ちませんし、複数行のテキスト折り返し（最後に3つのドットで終わる）を認識している方法はありません。 CSSのみを使用します。

簡単な方法は、jQuery（または同様のJavaScriptライブラリ）を使用してテキストを折り返し、最後に3つのドットを追加することです。例：

Reference to another StackOverflow post about wrapping content using CSS and jQuery for single line and multi line text.

だけではJavaScriptを使用してまた時々、コンテンツサーバー側を処理し、それがページ上で処理を表示することをお勧めしますが、それは（簡単に/またはより高速）時には、より便利です。ので、ここで行方不明の答えだ、jQuery DotDotDot

Answer 5

この質問はJavaScriptでタグ付けされています

はここでトリックを行いますjQueryのプラグインです。

高さが希望の高さよりも低いかどうかを確認しながら、この例のように各文字や単語を繰り返し処理できます。それぞれの真実のステップで、エレメントの内容をテキストで上書きすることができますが、最後の単語/文字は使用しません。

この場合、私は配列の文字列を変換し、各繰り返しでpopという文字列を変換しました。これが私たちのテキストの最後の部分を削除し、ループがinfiniteeeee行かないことを確認する...クロムで動作していない

/** 
 
* Truncates the text of an element depending its height. 
 
* 
 
* @param {Element} element 
 
* @param {Number} height 
 
*/ 
 
function truncateByHeight(element, height) { 
 
    var textContent = typeof element.textContent === 'undefined' ? 'innerText' : 'textContent'; 
 
    var parts = element[textContent].split(' '); 
 

 
    while (parts.pop() && element.clientHeight > height) { 
 
    element[textContent] = parts.join(' '); 
 
    } 
 
} 
 

 

 
var element = document.querySelector('.box'); 
 

 
truncateByHeight(element, 120);

<div class="box">Cornua naturae fulgura uno coegit quisquis ad margine? Pluvialibus umentia vultus nulli nunc pendebat speciem emicuit! Margine tonitrua caecoque iapeto. Origine levius nam. Silvas valles temperiemque forma? Ignotas tegit. Hunc ligavit: summaque freta illas invasit deerat proximus. Caelo calidis securae mentes pronaque traxit. 
 

 
Caligine omnia gentes. Posset aere certis eurus titan verba unus homini ora. Sed volucres. Campos effervescere flamina illi pondus umor. Cinxit obstabatque secrevit. Ligavit: natus aberant. Indigestaque regio rapidisque carmen coegit erat discordia liquidas. Ripis nix horrifer terrae dei tepescunt ad vos regio. 
 

 
Nabataeaque fronde pluviaque vos terra tellure flexi. Neu habendum poena locoque ne. Dedit locoque nunc nebulas. Mentisque liquidum summaque porrexerat cepit. Litem mare. Surgere adhuc ipsa. Orbem hanc volucres iapeto habentem. Dissociata otia inminet nubibus passim erant iners. Semina praecipites reparabat spectent fuerat.</div>