是什么导致文本重叠？

Question

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

例如，我有一段文字说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;
}

Answer 1

问题在于以下规则：

.videomsg{
    line-height:0px;
}

当您将line-height设置为0px时，两行之间没有空格，这就是它们相互重叠的原因。