[英]how to add a line break on javascript variable
非常簡單的問題,無法解決。 我正在嘗試在表格標題上添加換行符
var text = "<table id='test' class='test'>";
text += "<tr><th> style='font-size:16px'>Cool \nStuff</th></tr>";
我嘗試使用<br>
和\\n
添加換行符,但不走運,有人可以幫我嗎
\\n
在字符串中放置換行符,但是HTML將換行符視為空格。 要設置換行符,您:
使用<br>
(“ break”)元素:
var text = "<table id='test' class='test'>"; text += "<tr><th style='font-size:16px'>Cool<br>Stuff</th></tr>";
要么,
將第一行放在一個塊元素中,第二行放在另一個塊元素中:
var text = "<table id='test' class='test'>"; text += "<tr><th style='font-size:16px'>" + "<div>Cool</div>" + "<div>Stuff</div>" + "</th></tr>";
之類的東西。
使用<br>
應該可以正常工作。 注意:你有沒有和開口的錯字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>
添加</br>
應該可以,請參見下面的代碼段。 請注意,您的HTML中有錯誤。 <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>
將標題中的每一行分隔為<span>Cool</span><span>Stuff</span>
並在span中添加以下樣式:
span {
width: 100%;
display: block;
}
例:
// 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 -->
http://jsfiddle.net/68Lc0d7t/1/
您錯過了<th>
標記中的結束標記。.上面是使用<br>
標記的簡單工作方式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.