I'm currently taking a web development bootcamp online and building a personal website for practice. I've hidden a `div` that contains several quotes, each wrapped in a `p` tag, using CSS. Then, with JavaScript, I randomly select one of these hidden quotes to display on the webpage. My issue is that when I extract the quote from the hidden `p`, it appears to maintain the line breaks from the HTML, rather than just displaying it as plain text. I'm trying to figure out how to eliminate these unwanted line breaks. I've looked into the `white-space` and `line-break` CSS properties, but they haven't solved my problem. Any suggestions?
4 Answers
It doesn't really work like that; in normal situations, whitespace should collapse unless there are specific instructions to render it otherwise. It would help a lot if you could share your markup so we can dig deeper into what's happening.
Have you considered putting all your quotes on the same line instead of a `p` for each? That might minimize the break issues you're experiencing.
If you're using JavaScript, why not put your quotes in an array directly in your script? Here’s a quick mock-up:
```html
const quoteList = ["quote1", "quote2", "quote3"];
const randomQuote = quoteList[Math.floor(Math.random() * quoteList.length)];
QuoteP.innerText = randomQuote;
```
Every time the page loads, a random quote will appear from the array, which should get around your current issue pretty effectively.
Oh, so storing the quotes directly in the JS file could solve my problem too! I thought content had to be in HTML. Is this not the best practice, then?
It sounds like when you pull the text from the hidden `p`, you're getting the whitespace and line breaks from the HTML formatting. A quick fix is to use `.textContent` or `.innerText` in your JavaScript, along with applying `white-space: normal` to your display element. This helps to collapse multiple whitespace characters into single spaces. Also, you might want to clean the string in JavaScript using something like `quoteText.replace(/s+/g, ' ').trim()` to normalize any extra spaces. For learning purposes, storing quotes in a hidden `div` is fine, but later you might consider using a JavaScript array instead to keep things tidier.
Cleaning up and trimming the string did the trick! Thank you! Now I just have to get the hang of the `replace` method arguments. I hope MDN will help with that.
Are you suggesting I should line up all the `p` tags together? I worry because my editor auto-formats my code and adds breaks when it hits a specific line length. But thanks for the idea!