[英]how to add a line break on javascript variable
really simple question and cant figure it out. 非常简单的问题,无法解决。 I am trying to add a line break here on my table header
我正在尝试在表格标题上添加换行符
var text = "<table id='test' class='test'>";
text += "<tr><th> style='font-size:16px'>Cool \nStuff</th></tr>";
I have tried to add a line break using <br>
and \\n
and no luck, can anyone help me 我尝试使用
<br>
和\\n
添加换行符,但不走运,有人可以帮我吗
\\n
puts a newline in the string, but HTML treats newlines as spaces. \\n
在字符串中放置换行符,但是HTML将换行符视为空格。 To put in a line break, you: 要设置换行符,您:
Use a <br>
("break") element: 使用
<br>
(“ break”)元素:
var text = "<table id='test' class='test'>"; text += "<tr><th style='font-size:16px'>Cool<br>Stuff</th></tr>";
or, 要么,
Put the first line in one block element, the second in another: 将第一行放在一个块元素中,第二行放在另一个块元素中:
var text = "<table id='test' class='test'>"; text += "<tr><th style='font-size:16px'>" + "<div>Cool</div>" + "<div>Stuff</div>" + "</th></tr>";
That sort of thing. 之类的东西。
Use <br>
should work fine. 使用
<br>
应该可以正常工作。 Note you had a typo with the opening th
注意:你有没有和开口的错字
th
var text = "<table id='test' class='test'>"; text += "<thead>"; text += "<tr><th style='font-size:16px'>Cool <br/>Stuff</th></tr>"; text += "</thead>"; text += "</table>"; document.getElementById("z").innerHTML = text;
<div id="z"></div>
Adding </br>
should work, see the code snippet below. 添加
</br>
应该可以,请参见下面的代码段。 Please note that there is an error in your HTML. 请注意,您的HTML中有错误。
<th> style='font-size:16px'>
contains two closing >
tags, you should remove the first one. <th> style='font-size:16px'>
包含两个结束>
标记,您应该删除第一个。
var text = "<table id='test' class='test'>"; text += "<tr><th style='font-size:16px'> Cool </br> Stuff</th></tr>"; document.write(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Separate each line in the header into <span>Cool</span><span>Stuff</span>
and add the following styles to the span: 将标题中的每一行分隔为
<span>Cool</span><span>Stuff</span>
并在span中添加以下样式:
span {
width: 100%;
display: block;
}
Example: 例:
// using your javascript example... var text = "<table id='test' class='test'>"; text += "<tr><th> style='font-size:16px'><span style='width:100%; display:block;'>Cool</span><span style='width:100%; display:block;>Stuff</span></th></tr>";
.table { width: 100%; display: block; } .table > thead > tr > th { padding: 15px; text-align: center; border: solid 2px #d2d2d2; background-color: #000000; color: #ffffff; } .table > thead > tr > th > span { width: 100%; display: block; }
<table class="table"><!-- START TABLE --> <thead> <tr> <th><span>Cool</span><span>Stuff</span></th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody class="tbody"> </tbody> </table><!-- /END TABLE -->
Using <br>
works perfectly. 使用
<br>
效果很好。
(function () {
text += '<th>Cool<br>Stuff</th>';
})();
http://jsfiddle.net/68Lc0d7t/1/ http://jsfiddle.net/68Lc0d7t/1/
You missed the closing tag in the <th>
tag.. Above is a simple working fiddle with <br>
tag. 您错过了
<th>
标记中的结束标记。.上面是使用<br>
标记的简单工作方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.