如何在插入的文本中包含换行符

Question

我只是想知道如何在这个特定的代码情况下插入换行符。我正在通过jQuery的.text()方法显示它。我希望消息和名称之间有换行符。

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

我已尝试"\"Message\" \n Name"，但没有成功

这是jsfiddle http://jsfiddle.net/wa4mej2m/1/

Answer 1

您可以通过jQuery的.text()显示文字。你在字符串中放置的任何内容都不会在输出中产生换行符，因为换行符只是HTML元素中的空格 - 它们不会被特别解释。

如果您使用.html()代替，并在字符串中包含<br />标记，事情会更好：

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

// later ...

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

修复示例：

＆＃13;

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

要换行，如果要在HTML中呈现字符串，则需要添加<br>：

"\"Message\"<br>Name"

如果您没有呈现HTML，则为\n：

"\"Message\"\nName"

Answer 3

在PHP中，您可以使用<br>

完成换行符

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