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 <script type='text/javascript'> if that helps. — ppinzon
– ppinzon, Commented Nov 25, 2015 at 23:58
Sorry I don't understand the question. But I included a jsfiddle if seeing the full code helps answer your question jsfiddle.net/wa4mej2m/1 — ppinzon
– ppinzon, Commented Nov 26, 2015 at 0:04

Paul Roub · Accepted Answer · 2015-11-26 00:13:47Z

3

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>

edited Nov 26, 2015 at 0:13

answered Nov 26, 2015 at 0:08

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

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

2 Comments

ppinzon Over a year ago

Okay so if I understand correctly, I just have to add $(this).html(textarray[rannum]).fadeIn('fast'); underneath var textarray = [ "\"Message\"<br /> Name", ]; ?

Paul Roub Over a year ago

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.

Merott · Accepted Answer · 2015-11-25 23:58:33Z

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, 2015 at 23:58

Merott

7,4096 gold badges42 silver badges53 bronze badges

Comments

Mr Lister · Accepted Answer · 2015-11-30 07:48:05Z

1

In PHP you can accomplish line break with <br>

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

edited Nov 30, 2015 at 7:48

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Nov 25, 2015 at 23:58

Sohrab Hejazi

1,5116 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to include linebreak in inserted text

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related