jquery - 是什么导致文本重叠？

Question

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

例如，我有一段文字显示文件上传成功，但它的显示方式如下:

下面是表格单元格的 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，因此行与行之间没有空格，这就是它们相互重叠的原因。