What is the best way to make sure that every line break in HTML appears as a break line in the browser?

When working with HTML and its companion CSS, it is important to...

Exploring HTML:

<html>
<head>
    <link href="css/breakLineInBrowser.css" rel="stylesheet">
</head>
<body>
    <p>
     Line 1. 
     Line 2.
     Line 3.
    </p>
</body>
</html>

Diving into CSS - 

p {

}

See a Demo Here

When rendered in the browser, the text appears as - 

Line 1. Line 2. Line 3.

What specific CSS property must be added within the p {} rule to display it like this -

Line 1. 
Line 2.
Line 3.

Any hints? (No solutions involving the use of </br> tags in the HTML)

htmlcss

Answer №1

To achieve the desired spacing in your text, simply utilize the white-space property in CSS.

white-space: pre-line;

Answer №2

There are three possible solutions that you can consider.

  1. One option is to utilize the <pre> HTML tag.

    <br\> HTML tag
    


    <p> 
 Line 1.<br/> 
 Line 2.<br/> 
 Line 3.<br/> 
</p>

  2. Lastly, you also have the option to apply css styles

    <p style="white-space: pre-line;">
line1
line2
line3
</p>

Make sure to explore other answers as well.

Answer №3

What is the reason for not utilizing the paragraph?

<p>First sentence.</p>
<p>Second sentence.</p>
<p>Third sentence.</p>

Answer №4

The element you are looking for is the pre. Its equivalent in CSS is as follows:

pre{ white-space: pre ; display: block; unicode-bidi: embed }

(Referenced from this source)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to find a match by searching through multiple arrays for a corresponding variable name?

Hi there, I'm currently working on a function that triggers an alert if the name of an array of images matches the data attribute of the selected element. This is just a test phase before proceeding with my main project, but I've hit a roadblock. ...

javascripthtmlarrays

anticipates input

Having trouble with my join query, unsure if the issue lies within my query or somewhere else. The error message I'm receiving is: Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\pr ...

phpmysqlhtmlcss

Positioning a div with a set size to the right while allowing a div with a variable width to the left

Even though I achieved the desired outcome in this example (http://jsfiddle.net/jcx3X/40/), I am intrigued by the reasons why this other scenario (http://jsfiddle.net/jcx3X/41/) does not work. What is the significance of the div being floated first in th ...

htmlcsswidth

Is it possible to manipulate videos embedded in an iframe using javascript?

It's common knowledge that JavaScript commands from Google can be used to control YouTube videos, while Vimeo provides its own JavaScript commands for their videos. Both videos are typically embedded within 'iframes' on websites. I'm ...

javascriptjqueryhtmliframe

Display a loading message before fetching remote data in the Bootstrap modal box

Here is the code I am using to load remote PHP data into a Bootstrap modal box: $(function() { $(window).bind("resize", function() { if ($(this).width() < 400) { $('#tabs-content').removeClass('col-xs-10').ad ...

phpjquerycsstwitter-bootstrap-3bootstrap-modal

Arrays store values by reference, so when comparing their pointers, they should point to the same values in order to evaluate as true

In my understanding, arrays and objects act as pointers, pointing to a specific memory location. In the given example, when var a is updated, b should also be updated since it points to the same memory location as a. The expected final result would be tru ...

javascripthtmlarrays

Dealing with undefined variables when importing into create-react-app Sass: SassError

I am using create-react-app with SCSS style-files. My project includes an App.scss file where I import all other .scss stylesheets, and a variables.scss file where I define all project variables. However, when I import variables.scss into App.scss and the ...

cssreactjssasscreate-react-app

How can I make the expired date display in red color in a JavaScript date property?

In my HTML, I have 4 different dates. The expired date "END MAR 20" should be displayed in red color instead of green. The next date, "END APR 29," should be in green color. All preceding dates should also be displayed in red. I have successfully filtered ...

javascriptjqueryhtmlcolors

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

javascriptjquerycsspageloadregion

Using PHP regular expressions to find the final occurrence trailing after the last match in HTML

Looking to analyze a webpage (where the same product price is compared on different stores - each store has a block with its logo, price...) I want to separate each store into a different array element using preg_match_all I am trying to skip the advert ...

phphtmlstring

What is preventing me from opening this local html page without an IIS Server?

Currently immersed in a passion project that can be found at https://github.com/loganhenson/jsrpg This project has been a collaborative effort with a friend, utilizing Visual Studio Professional for development and testing it on my local IIS server. Init ...

javascripthtmlasp.netgoogle-chromebrowser

The `d-flex flex-column` is causing the image within the div to be hidden

The setup looks like this: <div className="d-flex flex-column"> <div> Text </div> <div style={{ backgroundImage: 'url(...)' }}> </div> </div> The URL is functioning correctly. The div element is ...

htmlcssreactjsbootstrap-4flexbox

Tips on updating the initial value of a select box or placeholder?

Here is a select input: <select name="" id=""> <option disabled hidden selected value=""> default </option> <option value="2">2</option> <option value="3">3</option> <option value="3">3</option> ...

htmlcss

What is the best way to retrieve the content of HTML tags from a string using JavaScript or AngularJS?

I have a string with mixed content of HTML tags and text. Here is an example: var str = "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height=" ...

javascripthtmlangularjs

What methods can be used to choose specific rows while styling columns with CSS?

As an exercise in CSS styling, I have successfully transformed an unordered list into columns. But now, I am curious if it is possible to target and style the "rows" within these columns. This is the CSS code currently in use: ul.popular{ margin:15px ...

css

Retrieve all radio inputs within dynamically generated divs

Each dynamically generated div contains 4 radio buttons: $(".wrapper").on("custom", ".item", function(){ $.each($(".item"),function(){ // Get all radio names and check if at least one is checked var radio_groups = []; ...

javascriptphphtmljquery

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

My dropdown is populated with owners from the owners data, but it includes an extra blank option. I need to eliminate this blank option. However, when I make the necessary changes to remove it, the required validator stops working properly. <md-input-c ...

javascripthtmlangularjs

Issues with the Bootstrap date time picker functionality

Even though I have added all the necessary libraries for the date time picker, it still isn't working properly. You can check out this fiddle to see the code. <div class='input-group date' id='from_time'> <input type ...

jqueryhtmltwitter-bootstrap-3datepicker

Fix image that won't load in Firefox

My website features an <img /> element that initially lacks a src attribute. The src is added dynamically using JavaScript at a later point. While Chrome hides it, Firefox displays an empty space: https://i.sstatic.net/3eZJ4.png Is there a way to p ...

javascriptjqueryhtmlcss

show numerical values as images in sql

Currently, I'm in the process of developing a website for a neighbor who is considering opening a new restaurant. One of the features I need to work on is a page dedicated to testimonials and reviews from customers. My goal is to use SQL to store the ...

phpcsssqldatabase