how to add a line break on javascript variable

Question

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

yeah its suppose to work but is not.. im using datatables plugin and im building my table dynamically — user3547086, May 01 '15 at 15:24
@user3547086 It would help if you put the exact code into your question that does not work! — epascarello, May 01 '15 at 15:24
you have a typo at `` .. the style tag is outside the tag.. And please see my answer. The `
` tag works perfectly — Abhishek Ghosh, May 01 '15 at 15:28

score 3 · Accepted Answer · answered May 01 '15 at 15:23

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

Use a   ("break") element:

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.

The first suggestion didn't work but the second one did. Thank you, I will accept your answer whenever it lets me — user3547086, May 01 '15 at 15:29

score 2 · Answer 2 · answered May 01 '15 at 15:23

Use   should work fine. Note you had a typo with the opening 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>

Alex · Answer 3 · 2015-05-01T15:29:39.380

Adding  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.

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>

score 0 · Answer 4 · answered May 01 '15 at 15:24

Separate each line in the header into CoolStuff and add the following styles to the 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 -->

score 0 · Answer 5 · answered May 01 '15 at 15:24

0

Using   works perfectly.

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

Relevant JSFiddle

answered May 01 '15 at 15:24

Lieu Zheng Hong

676
1
10
22

score 0 · Answer 6 · answered May 01 '15 at 15:25

0

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

You missed the closing tag in the <th> tag.. Above is a simple working fiddle with   tag.

answered May 01 '15 at 15:25

Abhishek Ghosh

2,593
3
27
60

how to add a line break on javascript variable

6 Answers6