Question

非常简单的问题，无法弄明白。我想在我的表格标题

上添加换行符

var text = "<table id='test' class='test'>";
    text += "<tr><th> style='font-size:16px'>Cool \nStuff</th></tr>";

我尝试使用<br>和\n添加换行符，但没有运气，任何人都可以帮助我

Answer 1

\n在字符串中添加换行符，但HTML将换行符视为空格。为了换行，你：

使用<br>（＆＃34; break＆＃34;）元素：

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>";

那种事。

Answer 2

使用<br>应该可以正常工作。请注意，您有一个打开th

的拼写错误

＆＃13;

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;

＆＃13;

<div id="z"></div>

＆＃13;

Answer 3

添加</br>应该有效，请参阅下面的代码段。请注意，HTML中存在错误。 <th> style='font-size:16px'>包含两个结束>标记，您应删除第一个标记。

＆＃13;

var text = "<table id='test' class='test'>";
text += "<tr><th style='font-size:16px'> Cool </br> Stuff</th></tr>";
document.write(text)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 4

将标题中的每一行分隔为<span>Cool</span><span>Stuff</span>，并将以下样式添加到范围：

span {
    width: 100%;
    display: block;
}

示例：

＆＃13;
＆＃13;
// 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>";
＆＃13;
.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; }
＆＃13;
<table class="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>
＆＃13;
＆＃13;
＆＃13;

Answer 5

http://jsfiddle.net/68Lc0d7t/1/

您错过了<th>标记中的结束标记。上面是一个简单的工作小提琴，带有<br>标记。

如何在javascript变量上添加换行符

5 个答案: