Indent the initial line of a new paragraph

Question

Indent the initial line of a new paragraph

CSS

<p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

Can the code above be used to achieve the desired output with text stacked line by line in the correct position and properly indented from the paragraph number?

html css

Answer 1

Answer №1

To achieve the desired formatting without using the br tag, you can utilize the text-indent property. Refer to the MDN documentation for more information.

p {
  margin-left: 2em;
  text-indent: -1.5em;
}

<p>1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

If modifying the HTML is not an option, a workaround is adding display:none; to the <br/> tags. You can create spacing between paragraphs by using padding-top and adjusting the first line with a negative value for text-indent:

br {
  display: none;
}
p {
  padding-top:1.2em;
  margin-left: 2em;
  text-indent: -1.5em;
}

<p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

Keep in mind that I used em units for the left indentation. This method will adjust based on the font size but may require adjustments depending on the specific font being used.

Answer 2

To achieve the desired formatting without using the br tag, you can utilize the text-indent property. Refer to the MDN documentation for more information.

p {
  margin-left: 2em;
  text-indent: -1.5em;
}

<p>1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p>1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

If modifying the HTML is not an option, a workaround is adding display:none; to the <br/> tags. You can create spacing between paragraphs by using padding-top and adjusting the first line with a negative value for text-indent:

br {
  display: none;
}
p {
  padding-top:1.2em;
  margin-left: 2em;
  text-indent: -1.5em;
}

<p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.3 text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br />1.4 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

Keep in mind that I used em units for the left indentation. This method will adjust based on the font size but may require adjustments depending on the specific font being used.

Answer 3

Answer №2

Unfortunately, the :first-word pseudo selector doesn't exist. However, you can achieve a similar effect by making some slight changes to the HTML structure:

<p><br /><span>1.2</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br /><span>1.3</span> text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text </p>
<p><br /><span>1.4</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

CSS:

p {
    line-height: 1.25em;
    padding-left: 2em;
    position: relative;
    text-align: justify;
}

p > span {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0; 
    width: 2em;
}
p > br:first-child + span {
    top: 1.25em; /* this fixes position in case the <p> starts with a <br/> */
}

https://jsfiddle.net/bfa4w3nu/2/

Answer 4

Unfortunately, the :first-word pseudo selector doesn't exist. However, you can achieve a similar effect by making some slight changes to the HTML structure:

<p><br /><span>1.2</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>
<p><br /><span>1.3</span> text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text </p>
<p><br /><span>1.4</span> text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p>

CSS:

p {
    line-height: 1.25em;
    padding-left: 2em;
    position: relative;
    text-align: justify;
}

p > span {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0; 
    width: 2em;
}
p > br:first-child + span {
    top: 1.25em; /* this fixes position in case the <p> starts with a <br/> */
}

https://jsfiddle.net/bfa4w3nu/2/

Answer 5

Answer №3

Styling with CSS3

li {
    text-align: justify;
    word-wrap: break-word;
}

Answer 6

Styling with CSS3

li {
    text-align: justify;
    word-wrap: break-word;
}

Indent the initial line of a new paragraph

Answer №1

Answer №2

Answer №3

Similar questions

Issues with Font Awesome fonts failing to load after compiling an Angular project using `ng build`

Retrieve the content outside of the quotation marks in an HTML document through web scraping

Personalizing Bootstrap Styles Using Sass

Ways to eliminate spacing between two select boxes?

Having trouble connecting a JavaScript file from my local directory to an HTML document. However, when I try to access it in the browser, I keep getting

Why does this element on Safari have a focus outline appearing even before it is clicked?

Methods to prevent ExtentReports from transforming HTML references in your Selenium logs into real HTML code

Error encountered while pressing key on vscode led to failure in requesting textDocument/documentLink

MUI Grid - justify content to the right

A guide on encrypting the data of a file that is uploaded in Meteor.js

Executing JavaScript code does not execute CSS code

Ways to prevent a timeout when the score exceeds 1000

Manipulating HTML content with Javascript Array

Tips for honing in on a particular card within a list of cards using React

Dynamically changing the borders of WebGL canvases: a guide to adding and

Incorporating a full-page background into a specific view using AngularJS

Tips for preventing a div from overflowing in col-md-12 in Bootstrap 3

Dynamically loading audio references in a foreach loop using C# MVC

Tips for creating a Carousel with more than three images using Bootstrap

Tips on how to achieve a 50% width within a bootstrap input group