Enable automatic indentation for wrapped text

Question

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this:

Peter piper picked a peck
of pickled peppers.

It should look like this:

Peter piper picked a peck
    of pickled peppers.

This is what I've attempted so far:

span.profile{ display:block; text-indent: -35px; /*this pulls the first line to the left*/ padding-left:35px; /*this pushes the paragraph to the right*/ padding-right:0px; text-align:justify; }

After implementing this, I wrap the entire text with span class="profile", but the issue is that I want it to "reset" after each line break. Is there a way to achieve that?

Appreciate any assistance!

css text formatting

Answer 1

Answer №1

I decided to showcase a compact JSFiddle example.

Does this meet your requirements?

div {
    width: 500px;
}
div p {
    text-indent: -20px;
    padding-left: 25px;
}

Although this resembles the CSS you provided, I have implemented it for every paragraph individually.

Please inform me of your thoughts.

Answer 2

I decided to showcase a compact JSFiddle example.

Does this meet your requirements?

div {
    width: 500px;
}
div p {
    text-indent: -20px;
    padding-left: 25px;
}

Although this resembles the CSS you provided, I have implemented it for every paragraph individually.

Please inform me of your thoughts.

Answer 3

Answer №2

It appears from the feedback that when you mention wanting it to 'reset' after each line break, you are looking for a way to prevent the next line from being indented following a  . Unfortunately, CSS does not have a mechanism to target the line immediately after such breaks.

To achieve the desired outcome, consider revising your HTML structure. If you apply display: block to a span, it may indicate the need for a block-level element like div or p instead. Instead of relying on  , opt for block elements to encapsulate sections of text.

Answer 4

It appears from the feedback that when you mention wanting it to 'reset' after each line break, you are looking for a way to prevent the next line from being indented following a  . Unfortunately, CSS does not have a mechanism to target the line immediately after such breaks.

To achieve the desired outcome, consider revising your HTML structure. If you apply display: block to a span, it may indicate the need for a block-level element like div or p instead. Instead of relying on  , opt for block elements to encapsulate sections of text.

Answer 5

Answer №3

A new addition to CSS is the inclusion of the hanging and each-line options for the text-indent property. These options allow for easy indentation of each line after the first, eliminating the need for negative values and padding. Additionally, they apply the indent even to lines following hard breaks like  .

At present (April 2024), only Firefox and Safari have implemented support for these new options. While they are part of the official CSS specification, they are still relatively recent additions. It is hoped that Chrome and other browsers will add support for them in the near future.

/* (NOTE: Only works on Firefox and Safari as of writing!) */
.indent {
  text-indent: 3em hanging each-line;
}

<p class="indent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Nunc id cursus metus aliquam eleifend. Odio facilisis mauris sit amet massa vitae.
</p>

<p class="indent">
Elit sed vulputate mi sit amet mauris commodo. Sed risus ultricies tristique nulla aliquet enim tortor. Eu turpis egestas pretium aenean pharetra magna.<br/>
Metus aliquam eleifend mi in nulla posuere sollicitudin. Risus quis varius quam quisque id diam. Facilisi etiam dignissim diam quis enim. Cras fermentum odio eu feugiat pretium nibh ipsum. Ornare lectus sit amet est placerat in egestas erat imperdiet.<br/>
Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. In tellus integer feugiat scelerisque varius. Ac turpis egestas sed tempus urna et. In mollis nunc sed id semper risus in hendrerit gravida. Et tortor consequat id porta. Feugiat in ante metus dictum. Non consectetur a erat nam. Netus et malesuada fames ac turpis egestas.
</p>

Answer 6

A new addition to CSS is the inclusion of the hanging and each-line options for the text-indent property. These options allow for easy indentation of each line after the first, eliminating the need for negative values and padding. Additionally, they apply the indent even to lines following hard breaks like  .

At present (April 2024), only Firefox and Safari have implemented support for these new options. While they are part of the official CSS specification, they are still relatively recent additions. It is hoped that Chrome and other browsers will add support for them in the near future.

/* (NOTE: Only works on Firefox and Safari as of writing!) */
.indent {
  text-indent: 3em hanging each-line;
}

<p class="indent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Nunc id cursus metus aliquam eleifend. Odio facilisis mauris sit amet massa vitae.
</p>

<p class="indent">
Elit sed vulputate mi sit amet mauris commodo. Sed risus ultricies tristique nulla aliquet enim tortor. Eu turpis egestas pretium aenean pharetra magna.<br/>
Metus aliquam eleifend mi in nulla posuere sollicitudin. Risus quis varius quam quisque id diam. Facilisi etiam dignissim diam quis enim. Cras fermentum odio eu feugiat pretium nibh ipsum. Ornare lectus sit amet est placerat in egestas erat imperdiet.<br/>
Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. In tellus integer feugiat scelerisque varius. Ac turpis egestas sed tempus urna et. In mollis nunc sed id semper risus in hendrerit gravida. Et tortor consequat id porta. Feugiat in ante metus dictum. Non consectetur a erat nam. Netus et malesuada fames ac turpis egestas.
</p>

Enable automatic indentation for wrapped text

Answer №1

Answer №2

Answer №3

Similar questions

The font displayed in Photoshop Mock Up may not be identical to the font used in HTML

A div element featuring a border with transparent edges on the top right and bottom left corners

Disabled text selection in Internet Explorer

Ways to ensure that both the Search text field and search button are of equal height

Are you looking to test your website's performance under limited bandwidth conditions

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

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

Deactivate the focus state when hovering over different items in the navigation bar

Insert between the top navigation bar and the sidebar menu

Enhance the progression bar using JavaScript

IE is notorious for not playing well with CSS

Ensure the footer remains at the bottom of the page even with changing

Insert content into a designated DIV

rendering google charts using jade template

Illustration: Fixing a CSS Issue

What is the best way to position a div as a footer within a larger main div?

Please indicate the number of lines for the href within the span element

Discover an improved method for creating a custom list style using Unicode Numbers in CSS

All UL and LI elements are aligned horizontally both before and after

Adjust the position if the height exceeds 100 pixels