javascript - divの高さに関してテキストを切り捨てる方法は?

Question

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

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

Answer 1

次の CSS を試してください。

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

これは単一行でのみ機能します。複数行の場合はJavaScriptが必要です。

Answer 2

テキストを非表示にするには、次のようにdivにoverflow:hidden cssプロパティを追加する簡単な解決策があります

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

ただし、最後に ... を表示するには、javascript で div の内容を取得し、そこで substr 関数を使用する必要があります。これは、divに表示できる文字数を把握するための試行錯誤の解決策になります。

Answer 3

この質問は JavaScript でタグ付けされているため、ここに回答がありません。

高さが目的の高さよりも低いことを確認しながら、(この例のように) 各文字または単語を反復処理できます。それぞれの真実のステップで、要素のコンテンツをそのテキストで上書きできますが、最後の単語/文字は上書きできません。

この場合、文字列を配列に変換し、pop反復ごとに変換しました。これにより、テキストの最後の部分が削除され、ループが無限にならないようになります...

/**
 * 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>

Answer 4

使用overflow: hiddenします...より多くのコードを投稿すると、より具体的になることができます。– j-man86 たった今編集

Answer 5

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

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

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

CSS と jQuery を使用して単一行テキストと複数行テキストのコンテンツをラップすることに関する別の StackOverflow 投稿への参照。

また、サーバー側でコンテンツを処理してからページに表示することをお勧めすることもありますが、JavaScript を使用する方が便利 (または高速/簡単) な場合もあります。

このトリックを実行する jQuery プラグインを次に示します: jQuery DotDotDot