이 특정 코드 상황에서 줄 바꿈을 어떻게 삽입 할 수 있는지 궁금합니다. jQuery의 .text()방법을 통해 표시하고 있습니다. 메시지와 이름 사이에 줄 바꿈이 있기를 바랍니다.
var textarray = [
"\"Message\" Name",
];
시도 "\"Message\" \n Name"했지만 성공하지 못했습니다.
여기 jsfiddle http://jsfiddle.net/wa4mej2m/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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다