Question

以下代码在新标签中加载txt文件内容。但即使内容位于<pre>标记内，它也不会保留换行符：

multiline.html：

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="js/ui-lightness/jquery-ui-1.8.15.custom.css" type="text/css"></link>
<style>
pre {
  border: 1px red solid !important;
}
</style>
<script>
$(document).ready(function() {
  $("#tabs").tabs({panelTemplate: '<pre></pre>'});
});
</script>
</head>
<body>
  <h3>PRE TAG:</h3>
  <pre>
  Multi
  line
  FTW
  </pre>
  <h3>jQueryUI-loaded PRE TAG:</h3>
  <div id="tabs">
    <ul>
      <li><a href="multiline.txt">Tab</a></li>
    </ul>
  </div>
</body>
</html>

multiline.txt：

I'm line #1
And I'm line #2
Guess what! I'm #3

And woohoo I'm #4 but I wanted to be alone!

作为替代方案，我尝试创建jsfiddle，但没有成功，因为浏览器会因为跨源加载错误而对我大喊大叫。

Answer 1

您可以尝试使用 pre 标记包装文本：

http://www.w3schools.com/tags/tag_pre.asp

Answer 2

请记住，HTML解析会忽略换行符。如果您希望使用换行符进行渲染，则需要添加<br />标记。

I am line #1 <br />
I am line #2 <br />
I am line #3 <br />

编辑：由于您无权访问源代码，因此可以执行以下操作（使用“内容”ID作为实际容器DIV ID的占位符，替换为您自己的容器。）：

$("#content").html( $("#content").html().replace("\n","<br />") );

Answer 3

根据jQueryUI ticket #7669，使用tabs小部件无法完成。

远程标签期望加载HTML，而不是明文。

加载文本文件的jQuery UI选项卡不保留换行符

3 个答案: