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

【问题标题】：How to include linebreak in inserted text如何在插入的文本中包含换行符
【发布时间】：2015-11-25 23:55:10
【问题描述】：

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

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

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

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

【问题讨论】：

我不确定我是否完全理解，但如果有帮助的话，它是一个插入到
对不起，我不明白这个问题。但是如果看到完整的代码有助于回答你的问题，我会附上一个 jsfiddle jsfiddle.net/wa4mej2m/1
好的，谢谢，我现在将其添加到帖子中
jQuery text() and newlines的可能重复

标签： javascript php

【解决方案1】：

您正在通过 jQuery 的 .text() 显示文本。您在字符串中输入的任何内容都不会导致输出中出现换行符，因为换行符只是 HTML 元素中的空格——它们不会被特别解释。

如果您改用.html()，并在字符串中间包含<br /> 标签，事情会变得更好：

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

// later ...

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

固定示例：

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

【讨论】：

好的，如果我理解正确，我只需要添加 $(this).html(textarray[rannum]).fadeIn('fast');下面 var textarray = [ "\"Message\"
Name", ]; ?
没有。您将示例中的$(this).text(...) 替换为$(this).html(...)。请参阅此处包含的代码 sn-p，这只是您的 jsFiddle，已经进行了更改。

【解决方案2】：

要换行，如果你在 HTML 中渲染字符串，你需要添加一个<br>：

"\"Message\"<br>Name"

如果您不呈现 HTML，则为 \n:

"\"Message\"\nName"

【讨论】：

【解决方案3】：

在 PHP 中，您可以使用 <br> 完成换行

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

【讨论】：