CSS
1
2
3
4
5
6
7
8
9
| /* overflow:hidden、heightは必ず指定する */.textOverflowTest3 { overflow: hidden; border: 1px solid #ccc; padding: 10px; width: 400px; height: 80px; background: #eee;} |
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| jQuery(function($) { $('.textOverflowTest3').each(function() { var $target = $(this); // オリジナルの文章を取得する var html = $target.html(); // 対象の要素を、高さにautoを指定し非表示で複製する var $clone = $target.clone(); $clone .css({ display: 'none', position : 'absolute', overflow : 'visible' }) .width($target.width()) .height('auto'); // DOMを一旦追加 $target.after($clone); // 指定した高さになるまで、1文字ずつ消去していく while((html.length > 0) && ($clone.height() > $target.height())) { html = html.substr(0, html.length - 1); $clone.html(html + '...'); } // 文章を入れ替えて、複製した要素を削除する $target.html($clone.html()); $clone.remove(); });}); |
table-cell などの場合、$target.height() を固定値にするとよい。
while((html.length > 0) && ($clone.height() > $target.height())) {
↓
while((html.length > 0) && ($clone.height() > 60)) {
while((html.length > 0) && ($clone.height() > $target.height())) {
↓
while((html.length > 0) && ($clone.height() > 60)) {
0 件のコメント:
コメントを投稿