Automatically indent wrapped text

Question

Bit of a noob here, but I basically want text to automatically indent when it's wrapped. So instead of:

Peter piper picked a peck
of pickled peppers.

It would be:

Peter piper picked a peck
    of pickled peppers.

This is what I've tried:

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 this, I add the span class="profile" tag around the entire text, but the problem is that I want it to "reset" after each line break. Is there a way to make it do that?

Thanks for any help!

Tertial

A choice of target language would be nice... Also, we're here to help, not write code for you. So what have you tried so far? – Mocambique

Sorry, that's fair enough. Preferably I would like to use CSS. I have tried setting padding thats greater than the margin, but like I said I'm not really a coding expert... – Tertial

@computerfreaker ok so I just tried this 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 this, I add the span="profile" tag around the entire text, but the problem is that I want it to "reset" after each line break. Is there a way to make it do that? – Tertial

I'm not well-versed in CSS myself (I was just playing around with simple combinations of text-align and text-indent), but I just edited your post to make it a little clearer so someone else might be able to help better. – Mocambique

Answer 1

I created a small JSFiddle.

Is this what you are looking for?

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

This looks like what you had for CSS, but I have it doing it for each paragraph.

Let me know.

Yorke

Almost. Would there be a way to have it "reset" each time there's a <br>? Because I'm basically typing everything in Kompozer then pasting the code on my site. Kompozer doesn't seem to be using <p> tags... – Tertial

By the way here's an example of one of the pages I would use it on, under the "company history" section. As you can see under "2006" the text wraps to the start... – Tertial

I've never used Kompozer myself, but my understanding is that it is basically just a WYSIWYG editor. So basically you are creating "paragraphs" by hitting enter/return one or two times which inserts a <br> tag or two. ---This code that it is creating for you isn't semantically correct. There is no way I know of that is fully supported to do this at this point in time. – Yorke

Something that isn't fully supported that may or may not be worth looking into is text-indent: each-line. I would advise finding a way to create semantic code though. Paragraphs should be in paragraph tags - plus, you'll be able to make this work! – Yorke

That's fair enough, but because I have to make these history sections on a daily basis, I need to not be too focused on the code aspect. I don't really want to have to spend a bunch of extra time inserting tags every day, and so on. I'm really a writer, not a coder haha! Kompozer is a WYSIWYG editor, do you know of anything similar that would use more correct code? I definitely would love to get this to work! – Tertial

Sure, my answers are getting a little off of the original topic, but oh well haha. It sounds like you are creating a webpage every time you post something? If this is the case, you might want to look into a content management system so that you can just do the writing. Or you could find a WYSIWYG editor that automatically adds 'p' tags. – Yorke

Yeah it's pretty much a Wordpress blog about products, but I want part of the site to be company profiles for each company associated with the products, hence the "Company History" section. I'll try and look for a WYSIWYG editor that using <p> tags so I can use your code. Thanks a bunch mate! – Tertial

Figured it out! Using a different WYSIWYG editor now which is a little more correct! Thanks so much, it works a charm! – Tertial

Answer 2

From the comments, it seems that by “I want it to ‘reset’ after each line break” you mean that after any <br> element, the next line should not be indented. Then the answer is no, you can’t do that, since <br> is just a forced line break, and there is no way in CSS to refer to the line after such a break.

You should redesign the use of HTML. If you set display: block on a span element, the odds are that you should be using a block element like div or p instead. Instead of using <br>, you should use block elements that wrap blocks of text.

Glassman

Answer 3

CSS now has the hanging and each-line options to text-indent, which indents each line after the first without needing a negative value plus padding, and applies the indent to lines after hard breaks like <br/>, respectively.

However as of writing (April 2024), only Firefox and Safari implement support for the new options. While they are in the official CSS specification, they're relatively new. Hopefully Chrome and other browsers will implement support soon.

/* (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>

Embodiment