Inserting a linebreak into a string in Javascript

**The Paul** · 02-13-2012, 06:38 PM

I have searched high and low for this and found dozens of solutions which do not actually work.

What I would like to do is create a paragraph, insert a string into that paragraph, and be able to put linebreaks in that string.

If I've got something along the lines of....

Code:

<html>
<head>
<script type="text/javascript">
	function someText(){
		var someString = "Hello" + "World";
		var someParagraph = document.createElement('p');
		someParagraph.textContent = someString;
		document.getElementById('body').appendChild(someParagraph);

	}
</script>
</head>
<body id = 'body'>
	<script>someText();</script>
</body>
<html>

Is there anything that can be done to the

Code:

var someString = "Hello" + "World";

line to make "Hello" and "World" appear on separate lines?

I've seen people say to add \n, \r\n, or <br/> in the middle of the string. None of those work.

I've also seen it suggested that making it into two lines of code like:

Code:

var someString = "Hello" 
+"World";

would cause it to display as two lines. That seemed sketchy, but I tried it anyway. It has about a much bearing on the way things are displayed as you'd think.

I don't want to make it two separate paragraphs, because browsers often put a double line break there, and I only want one.

Is there a way to do this?

**JMRKER** · 02-13-2012, 09:41 PM

Try...

Code:

var someString = "Hello<br>World";

**coothead** · 02-14-2012, 03:22 AM

Hi there The Paul,

and a warm welcome to these forums.

Text strings cannot have line breaks.

But as you using document.createElement('p'), you could try using document.createElement('br') to separate the strings....

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<script type="text/javascript">

function init(){
   str=[
        'Lorem ipsum dolor sit', 
        'amet, consectetur', 
        'adipiscing elit. Donec', 
        'ultricies sollicitudin', 
        'nisi, ut molestie felis', 
        'adipiscing sit amet.'
        ];

    br=[];

    par=document.createElement('p');

for(c=0;c<str.length;c++){
    par.appendChild(document.createTextNode(str[c]));
    br[c]=document.createElement('br');
    par.appendChild(br[c]);
 }
    document.body.appendChild(par);
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

</head>
<body>

<div></div>

</body>
</html>

coothead

**zaidmavia** · 02-14-2012, 05:31 AM

i will b greatful to u if u kindly give me a program to give animation for this script , there are 6 quotes in this script i want them to appear one by one on my webpage,without reloading the page, u give either fade in fade out animation or blur animation or dim animation , god bless the script whch i have is this

<script language="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
quotes[2] = "That's not a haircut. That's a cry for help.";
quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";
quotes[4] = "Some days it's just not worth gnawing through the leather straps.";
quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>

**coothead** · 02-14-2012, 03:16 PM

Hi there zaidmavia,

and a warm welcome to these forums.

Strictly speaking, you should really have started a new thread for your problem.

But we all make errors of judgement, especially me.

Anyway have a look at this example....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>in and out random quotes</title>

<style type="text/css">
body {
    background-color:#f0f0f0;
    font-family:verdana,arila,helvetica,sans-serif;
    font-size:16px;
 }
#box {
    width:680px;
    padding:20px 0;
    border:1px solid #333;
    border-radius:10px;
    margin:30px auto;
    font-size:110%;
    color:#000;
    text-align:center;
    background-color:#fff;
    box-shadow:#333 8px 8px 16px;
 }
#text {
    filter:alpha(opacity=0);
    opacity:0;
    text-shadow:#669 1px 1px 2px;
 }
</style>

<script type="text/javascript">
   var quotes=[
              'So many cats, so few recipes.',
              'Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.',
              'That\'s not a haircut. That\'s a cry for help.',
              'The last thing I want to do is hurt you. But it\'s still on the list.',
              'Some days it\'s just not worth gnawing through the leather straps.',
              'Doing for blogging what Ghengis Khan did for social work.'
              ];

   var test=0;
   var c=0;
   var num=0;
   var speed=50;
   var obj,temp;

function init() {
   obj=document.getElementById('text');
   temp=num;
   fadeInOut();
 }
function fadeInOut(){
if(test==0){
   c++;
 }
else {
   c--; 
 }
if(obj.filters) {
   obj.style.filter='alpha(opacity='+c+')';
 }
else{
   obj.style.opacity=c/100;
 }
   obj.firstChild.nodeValue=quotes[num];
if(c==100) {
   test=1;
 }
if(c==0) {
   test=0;
while(num==temp){
   num=Math.floor(Math.random()*quotes.length);
 }
   temp=num;
 }
setTimeout(function(){fadeInOut()},speed);
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<div id="box">
<span id="text">Doing for blogging what Ghengis Khan did for social work.</span>
</div>

</body>
</html>

coothead

**zaidmavia** · 02-15-2012, 02:14 AM

tnx alot coothead , actually i m new to this n i dont know how to b in forums , tnx for the help i will b greatful to u if u giv me a short code for 1000 quotes with fade in fade out animation, i dnt know programming language all i cn do is edit ur code n put it in my blog , tnx again

**bionoid** · 02-14-2012, 02:43 AM

Depending on what tags you use will decide which seperators would work.
I also used innerHTML in the place where you had textContent.

Code:

<html>
	<head>
		<script type="text/javascript">

			function someText()
			{
				var someString =
					'Hello<br />World' +
					'<pre>Hello\nWorld</pre>';

				var someParagraph = document.createElement('p');
				someParagraph.innerHTML = someString;
				document.getElementById('body').appendChild(someParagraph);
			}

		</script>
	</head>
	<body id="body">

		<script>someText();</script>

	</body>
<html>

**jadhav.soma** · 02-15-2012, 06:37 AM

try this one............

var someString = "Hello" + "<br />" + "World";

**nap0leon** · 02-15-2012, 08:03 AM

If you use <br/>, your lines will be separated vertically by only the line-height that you have defined.

If you use <p> and </p>, the lines will be separated vertically by the line-height plus the margin defined for 'paragraph' - the default margin-bottom on <p> tags is 16 pixels (in the latest FireFox).

Thread: Inserting a linebreak into a string in Javascript

Thread Tools

Display

Hybrid View

Inserting a linebreak into a string in Javascript

animation script

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions