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

how to add a line break on javascript variable

提问by user3547086

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 \nand no luck, can anyone help me

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

回答by T.J. Crowder

\nputs a newline in the string, but HTML treats newlines as spaces. To put in a line break, you:

\n在字符串中放置一个换行符，但 HTML 将换行符视为空格。要插入换行符，您：

1. Use a <br>("break") element:

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

   or,

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

1. 使用<br>("break") 元素：

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

   或者，

2. 将第一行放在一个块元素中，第二行放在另一个元素中：

   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.

之类的东西。

回答by epascarello

Use <br>should work fine. Note you had a typo with the opening th

使用<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>

回答by Alex

Adding </br>should work, see the code snippet below. Please note that there is an error in your HTML. <th> style='font-size:16px'>contains two closing >tags, you should remove the first one.

添加</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>

回答by wahwahwah

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 {
    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 -->

回答by Lieu Zheng Hong

Using <br>works perfectly.

使用<br>效果完美。

(function () {
    text += '<th>Cool<br>Stuff</th>';
})();

Relevant JSFiddle

相关JSFiddle

回答by Abhishek Ghosh

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>标签工作。