使用jQuery加载XML-在一行上打印输出

我使用jQuery加载一个XML文件的内容，当用户选择一个剧本时，他们应该得到一个所有剧本的列表以及它们包含的场景

但是，如果在到达div末尾时有一个较长的场景标题，而不是在新行上打印剩余的数量，则它会在同一行上打印自身

这是我用来从XML加载播放概览的函数：

function displayOverview(play_dom) {
  current_play_dom = play_dom;
  currentContext = $("PLAY", current_play_dom);
  $("#mainOutput").empty();
  $("#mainOutput").append('<p class="dramatis">' + $("PLAY>PERSONAE>TITLE", current_play_dom).text() + '</p>');
  $("PLAY>ACT", current_play_dom).each(function (actNo_jq) {
    var current_act = $(this);
    var actNo_ws = actNo_jq + 1;
    $("#mainOutput").append('<p class="actTitle link"' + 'id="' + actNo_ws + '">' + $("TITLE:first", current_act).text() + "<p>");
    $("SCENE", current_act).each(function (sceneNo_jq) {
      var current_scene = $(this);
      var sceneNo_ws = sceneNo_jq + 1;
      $("#mainOutput").append('<p class="sceneTitle link"' + 'id="' + actNo_ws + "_" + sceneNo_ws + '">' + $("TITLE:first", current_scene).text() + "<p>");
    });
  });
  contextInfo();
}

它附加到的div的CSS：

#mainOutput { 
  float: left;
  height: 472px;
  width: 756px;
  padding: 10px;
  display: inline;
  overflow: auto;
  margin-left: -100px;
  font-family: Intro;
  font-size: 14px;
  color: #4b3f2e;
}

---

如何解决这个问题？

只需将线条高度增加到更合适的高度即可。100%可能会有帮助

.sceneTitle {
    line-height: 100%;
}

---

只要把线的高度增加到更合适的高度就行了。100%可能会有帮助

.sceneTitle {
    line-height: 100%;
}

---

谢谢，这很简单。唯一的问题是当新行换行时，

文本缩进

没有应用到新行。您可以在sceneTitle类的左侧设置填充，而不是使用文本缩进。谢谢，这非常简单。唯一的问题是当新行换行时，

文本缩进

未应用于新行。您可以在SceneTile类的左侧设置填充，而不是使用文本缩进。