Question

我希望元素在元素中保持相同的大小和替换文本。文本和替代文本可以是任何长度。我目前通过猜测文本在元素中的长度来截断备用文本（但不考虑可能有多行的原始文本）。如果所有内容都是单行并且用户没有调整窗口大小，那么它可以正常工作。 $(window).resize(findCELLSIZE);经常发生火灾（每次我更换元素），所以我不会用它来重新计算宽度和高度。

我有HTML（simlified）：

<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);

Here's a fiddle我的代码在IE8中运行，但不在Firefox 15中运行（jQuery写入html5数据属性时一定存在问题）

Answer 1

没有一个CSS建议完全有效（实际表格更复杂：它可能是表格，IE8，或两者兼而有之）。解决方案是不更改元素，而是使元素具有相同的大小，位置具有更大的z-index。 Updated Fiddle...为了保持浏览器中立，我将不得不弄清楚为什么jQuery的位置和大小不会在不同的浏览器中标准化...

替换内容而不更改或具有固定的高度/宽度<table> </table>

1 个答案: