要素を同じサイズに保ち、要素内に代替テキストを入れたい。テキストと代替テキストは任意の長さにすることができます。私は現在、テキストが要素に含まれる長さを推測することによって代替テキストを切り捨てています(ただし、元のテキストに複数の行がある可能性があることは考慮しないでください)。すべてが1行で、ユーザーがウィンドウのサイズを変更しなくても、問題なく機能します。 $(window).resize(findCELLSIZE);
頻繁に発火するので(要素を交換するたびに)、幅と高さを再計算するためにそれを使用していません。
私はHTML(簡略化)を次のように持っています:
<table id='main'>
<thead>
<th width='100'>first</th>
<th>second</th>
<th width='100'>third</th>
</thead>
<tbody>
<tr>
<td>Blah</td>
<td class='special' data-text="<span class='highlight'>different BLAH1</span>,.,<span class='highlight2'>short BLAH2</span>">Blah Blah</td>
<td>Blah</td>
</tbody>
</table>
簡略化されたjQuery/javascriptを次のように使用します。
var DESCRIPTIONheight = [];
var DESCRIPTIONwidth = 0;
function findCELLSIZE () {
$("#main tbody tr").each(function() {
var thatwidth = $(this).find('td:nth-child(2)').width();
if (thatwidth >= DESCRIPTIONwidth) { DESCRIPTIONwidth = thatwidth+1; }
});
$(".special").each(function () {
$(this).closest('tr').height('');
DESCRIPTIONheight.push($(this).height()+1);
});
}
findCELLSIZE();
//$(window).resize(findCELLSIZE);
function flashEXPRESS() {
$(".special").each(function (index) {
var next = $(this).data('text').split(/,\.,/)[0];
var temp = '';
if (next != $(this).data('text')) {
temp = $(this).data('text').split(/^(.+?),\.,/)[0] +',.,';
}
temp = temp + $(this).html();
var mytextlength = next.match(/>(.*?)<\/span>$/i);
if(mytextlength) {
if (mytextlength[1].length*7 > DESCRIPTIONwidth) {
mytextlength[1] = mytextlength[1].substring(0,Math.floor(DESCRIPTIONwidth/7));
next = next.replace(/>(.*?)<\/span>$/i,'>'+mytextlength[1]+'</span>');
}
}
$(this).html(next);
$(this).width(DESCRIPTIONwidth);
$(this).data('text', temp);
$(this).closest('tr').height(DESCRIPTIONheight[index]);
});
}
var flashEXPRESSid = 0;
flashEXPRESSid = setInterval(flashEXPRESS,1000);
これがフィドルです私のコードはIE8で実行されますが、Firefox 15では実行されません(jQueryがhtml5データ属性を書き込むことに問題があるはずです)