1

我正在使用 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;
}

我怎样才能解决这个问题？

4

1 回答 1

1

只需将行高增加到更合适的值。100% 可能会有所帮助。

.sceneTitle {
    line-height: 100%;
}
于 2013-04-30T12:33:47.220 回答