加载文本文件的 jQuery UI 选项卡不保留换行符
以下代码在新选项卡中加载 txt 文件内容。但即使内容位于
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!
As另一种方法是，我尝试创建一个 jsfiddle，但没有成功，因为浏览器会对我大喊大叫和跨域加载错误。
The following code loads a txt file content in a new tab. But it doesn't preserve newlines even though the content is inside a <pre> tag:
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!
As an alternative, I tried to create a jsfiddle, with no success since the browser will yell at me with cross-origin loading error.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以尝试使用 pre 标签包裹文本：
http://www .w3schools.com/tags/tag_pre.asp
You could try wrapping the text with a pre tag:
http://www.w3schools.com/tags/tag_pre.asp
请记住，HTML 解析会忽略换行符。如果您希望它带有换行符，则需要添加
编辑：由于您无权访问源，您可以执行以下操作（使用“内容”ID 作为实际容器 DIV id 的占位符，替换为您自己的。）：
Remember, HTML parsing ignores line breaks. If you want it to render with the line breaks, you need to add
<br />tags.EDIT: Since you don't have access to the source, you can do something like this (using "content" ID as placeholder for actual container DIV id, replace with your own.):
根据 jQueryUI ticket #7669，它不能通过
tabs 完成代码> 小部件。As per jQueryUI ticket #7669, it can't be done with the
tabswidget.