How to include linebreak in inserted text

Question

I was just wondering how could I insert a line break in this particular code situation. I'm displaying it via jQuery's .text() method. I would like for there to be a line break between the message and name.

var textarray = [
    "\"Message\" Name",
];

I've tried "\"Message\" \n Name", but with no success

Here is the jsfiddle http://jsfiddle.net/wa4mej2m/1/

I'm not sure I quite understand, but it is a php file inserted under — ppinzon, Nov 25 '15 at 23:58
Sorry I don't understand the question. But I included a jsfiddle if seeing the full code helps answer your question http://jsfiddle.net/wa4mej2m/1/ — ppinzon, Nov 26 '15 at 00:04
Possible duplicate of [jQuery text() and newlines](http://stackoverflow.com/questions/4535888/jquery-text-and-newlines) — Sohrab Hejazi, Nov 26 '15 at 00:18

Paul Roub · Accepted Answer · 2015-11-26T00:13:47.613

You're display the text via jQuery's .text(). Nothing you put in the string will cause a line break in the output, since newlines are just whitespace within HTML elements -- they're not going to be interpreted specially.

If you were to use .html() instead, and include a <br /> tag in the midst of your string, things would go better:

var textarray = [
  "\"Message\"<br /> Name",
];

// later ...

$(this).html(textarray[rannum]).fadeIn('fast');

Fixed example:

$(window).load(function() {

  $(window).resize(function() {
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
  });

  var textarray = [
    "\"Example\" <br> Name"
  ];
  var firstTime = true;

  function RndText() {
    var rannum = Math.floor(Math.random() * textarray.length);
    if (firstTime) {
      $('#random_text').fadeIn('fast', function() {
        $(this).html(textarray[rannum]).fadeOut('fast');
      });
      firstTime = false;
    }
    $('#random_text').fadeOut('fast', function() {
      $(this).html(textarray[rannum]).fadeIn('fast');
    });
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
  }

  $(function() {
    // Call the random function when the DOM is ready:
    RndText();
  });
  var inter = setInterval(function() {
    RndText();
  }, 3000);
});

body {
  -webkit-animation: pulse 200s infinite;
  animation: pulse 15s infinite;
}

@-webkit-keyframes pulse {
  0% {
    background: #FBFFF7
  }

  3% {
    background: #FBFFF7
  }

  30% {
    background: #FBFFF7
  }

  60% {
    background: #FBFFF7
  }

  90% {
    background: #FBFFF7
  }

  100% {
    background: #FBFFF7
  }
}

@keyframes pulse {
  0% {
    background: #FBFFF7
  }

  3% {
    background: #FBFFF7
  }

  30% {
    background: #FBFFF7
  }

  60% {
    background: #FBFFF7
  }

  90% {
    background: #FBFFF7
  }

  100% {
    background: #FBFFF7
  }
}

.container {
  position: relative;
  vertical-align: middle;
  margin: auto;
}

#random_text {
  font-size: 3vw;
  text-align: center;
  vertical-align: middle;
  text-align: -moz-center;
  text-align: -webkit-center;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div id="random_text"></div>
</div>

Okay so if I understand correctly, I just have to add $(this).html(textarray[rannum]).fadeIn('fast'); underneath var textarray = [ "\"Message\"
Name", ]; ? — ppinzon, Nov 26 '15 at 00:14
No. You replace the `$(this).text(...)` stuff in your example with `$(this).html(...)`. See the code snippet included here, which is just your jsFiddle with that change already made. — Paul Roub, Nov 26 '15 at 00:15

score 2 · Answer 2 · answered Nov 25 '15 at 23:58

2

To have a line break, if you're rendering the string in HTML, you need to add a <br>:

"\"Message\"<br>Name"

If you're not rendering HTML, it's \n:

"\"Message\"\nName"

answered Nov 25 '15 at 23:58

Merott

7,189
6
40
52

score 1 · Answer 3 · edited Nov 30 '15 at 07:48

1

In PHP you can accomplish line break with <br>

var textarray = [
    "Message <br> Name"
];

edited Nov 30 '15 at 07:48

Mr Lister

45,515
15
108
150

answered Nov 25 '15 at 23:58

Sohrab Hejazi

1,441
6
18
29

How to include linebreak in inserted text

3 Answers3