jquery - jQuery を使用した XML の読み込み - 1 行でそれ自体を印刷する出力

Question

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();
}

直接適用されている CSS:

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

.link {
  cursor: pointer;
}

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

追加される 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;
}

どうすればこれを修正できますか?