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

Question

我正在使用jQuery加载XML文件的内容，当用户选择播放时，他们应该获得所有Acts及其包含的场景的列表。

但是，如果在到达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();
}

直接应用的CSS：

.sceneTitle {
  font-size: 14px; 
  text-indent: 3.0em;
  line-height: 25%;
}

.link {
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}

附加到div的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;
}

我该如何解决这个问题？

Answer 1

只需将线高增加到更合适的位置即可。 100％可能有所帮助。

.sceneTitle {
    line-height: 100%;
}