15

私はいくつかの動的テキスト（データベースからのもの）を持っており、div

私divのサイズは固定されています。ただし、テキストが長くなりすぎると、2行に分割されます。長いテキストの最後に3つのドットを配置して、1行に収まるようにします。

例：My really long textになりますMy really lo...

私はいくつかの試みをしましたが、基本的にそれらのすべては文字を数えることに依存しています。つまり、文字の幅が固定されていないため、幸運ではありません。たとえば、首都Wは小さなものよりもはるかに広いですi

したがって、文字カウントアプローチで2つの主な問題が発生します。

  1. テキストに細い文字が多数含まれている場合、テキストが実際にトリミングされる前に1行に収まる場合でも、テキストは切り取られて...が追加されます。

  2. ワイド文字が多い場合は、最大文字数にカットしてドットを追加しても2行になります。

文字数ではなく、テキストの実際の幅を考慮した解決策（JavaScriptまたはCSS）はありますか？

4

4 に答える 4

50

次のスタイルを使用します。

white-space: nowrap;      /*keep text on one line */
overflow: hidden;         /*prevent text from being shown outside the border */
text-overflow: ellipsis;  /*cut off text with an ellipsis*/
于 2013-03-14T09:51:55.923 に答える
4

とは別にellipsis、を使用してマウスホバーにテキスト全体を表示することをお勧めしますtooltip。

フィドル

于 2013-03-14T09:56:43.363 に答える
3

Trunk8をお勧めします

次に、任意のテキストをdivのサイズに合わせることができます。これにより、1行を超えるテキストがトリミングされます（許可される行数を設定するオプションが利用可能です）

例えば

$('.truncate').trunk8();
于 2013-03-14T09:56:52.827 に答える
1

css省略記号を確認する必要があります：http ：//www.w3schools.com/cssref/css3_pr_text-overflow.asp

于 2013-03-14T09:50:44.850 に答える