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
– user3547086, Commented May 1, 2015 at 15:24
@user3547086 It would help if you put the exact code into your question that does not work! — epascarello
– epascarello, Commented May 1, 2015 at 15:24
you have a typo at <th> .. the style tag is outside the tag.. And please see my answer. The   tag works perfectly — Abhishek Ghosh
– Abhishek Ghosh, Commented May 1, 2015 at 15:28

T.J. Crowder · Accepted Answer · 2015-05-01 15:23:42Z

4

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

answered May 1, 2015 at 15:23

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3547086 Over a year ago

The first suggestion didn't work but the second one did. Thank you, I will accept your answer whenever it lets me

epascarello · Accepted Answer · 2015-05-01 15:23:51Z

2

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>

answered May 1, 2015 at 15:23

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

wahwahwah · Accepted Answer · 2015-05-01 15:24:40Z

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

Lieu Zheng Hong · Accepted Answer · 2015-05-01 15:24:52Z

0

Using   works perfectly.

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

Relevant JSFiddle

answered May 1, 2015 at 15:24

Lieu Zheng Hong

7062 gold badges10 silver badges22 bronze badges

Comments

Abhishek Ghosh · Accepted Answer · 2015-05-01 15:25:35Z

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 1, 2015 at 15:25

Abhishek Ghosh

2,7243 gold badges31 silver badges60 bronze badges

Comments

Alex · Accepted Answer · 2015-05-01 15:29:39Z

0

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>

edited May 1, 2015 at 15:29

answered May 1, 2015 at 15:24

Alex

21.8k11 gold badges68 silver badges77 bronze badges

Collectives™ on Stack Overflow

how to add a line break on javascript variable

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related