0

我想知道如果文本对于单元格的宽度来说太大而不仅仅是进入下一行，那么附加在表格单元格中的一段文本如何相互重叠？

例如，我有一段文字，The file upload was successful但它的显示方式如下：

在此处输入图像描述

以下是表格单元格的 html 及其内容：

 var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" + 
    "Video File: <input name='fileVideo' type='file' class='fileVideo' /></label>" +  
    "<input type='submit' name='submitVideoBtn' class='sbtnvideo' value='Upload' /></label>" + 
     "<p class='listVideo' align='left'></p>" +
    "<iframe class='upload_target_video' name='upload_target_video' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");

下面是 jquery，它显示相关消息：

function stopVideoUpload(success, videoID, videofilename){

      var result = '';
      videocounter++;

      if (success == 1){
         result = '<span class="videomsg'+videocounter+'">The file was uploaded successfully</span>';
            $('.listVideo').eq(window.lastUploadVideoIndex).append('<input type="text" name="vidid" id="'+videoID+'" value="' + videoID + '" />');
            $('.listVideo').eq(window.lastUploadVideoIndex).append('<div>' + htmlEncode(videofilename) + '<button type="button" class="deletefilevideo" data-videoID="'+videoID+'"  data-video_file_name="' + videofilename + '">Remove</button><br/><hr/></div>');
          }


      $(sourceVideoForm).find('.videomsg').html(result);
      $(sourceVideoForm).find('.videomsg').css('visibility','visible'); 
      $(sourceVideoForm).find(".fileVideo").replaceWith("<input type='file' class='fileVideo' name='fileVideo' />");
      $(sourceVideoForm).find('.videof1_upload_form').css('visibility','visible');    


      return true;   
}

下面是CSS：

    .videof1_upload_process{
    position:relative;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px;
    margin-left: auto;
    margin-right: auto;
    }

.videofileupload{
    text-align:center;
    width:100%;
    margin:0px;
    padding:5px;
    font-size:85%;  
    }

.videouploadform{
    width:100%; 
}

.listVideo{
    text-align:left;
    margin:0;
    padding-left:0; 
}

.videomsg{
    line-height:0px;
} 

#qandatbl{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
}       

#qandatbl{
    width:100%;
    margin-left:0;
    float:left;
}

#qandatbl td { 
    vertical-align: middle;
}

#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}
4

1 回答 1

4

问题在于以下规则：

.videomsg{
    line-height:0px;
}

正如您设置的那样line-height，0px线之间没有空格，这就是它们相互重叠的原因。

于 2013-01-21T23:22:48.277 回答