Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Livia Dobai
Livia Dobai
21,894 Points

How can be rendered a html line break in a spoiler text? If I use \n no new line is rendered.

I tried using <br> tag instead but the < and > need an ascii code and the text in the object becomes really messy.

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You had the right idea, to display a blank line in HTML you need some kind of formatting, and "<br>" (you may need two of them) is one way.

The "<" character must be encoded to appear visually, but not if you are constructing a tag with it.

Blank lines can also be created a variety of ways including the use of paragraphs, margins, padding, line-height, etc.

Here are a couple of examples (must be viewed in your workspace/browser):

code.html 
there should be a blank line between this line
<br><br>
and this one.  This approach works well inside paragraphs.
<hr>
<p>the browser also puts blank lines between paragraphs like this one</p>
<p>and this second paragraph</p>

If you're creating HTML inside of JavaScript code, you may have to choose the spacing method depending on what type of element you are constructing.

If you have any further trouble, share your code or use the snapshot function in the workspace and provide the link

Livia Dobai
Livia Dobai
21,894 Points

Thanks Steven! I'm creating an interactive flashcard page based on the Spoiler Revealer project. Im manually creating the object with the questions and answers. I needed the best approach to produce line breaks within my answer text. Here is the Github repo with the code. You can see th js/api.js where I'm trying to break the text with the \n. https://github.com/livike/Web-development-Flashcards Here is the working page: http://livike.github.io/Web-development-Flashcards/

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Just replace your "\n" sequences with "<br>", like this:

api.js 
    'answer': "if(condition)<br> {<br> code<br> }<br> else if(condition)<br> {<br> code<br> }"

That will give you line breaks. Then you'll probably want to add a way to identify formatted code and not use the centering on those answers, plus add some styling to perform indentation.

Livia Dobai
Livia Dobai
21,894 Points
Livia Dobai
Livia Dobai
21,894 Points

You are right. The solution is that simple. Thank you.