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. Peter piper picked a peck of pickled peppers. 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 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!
8,818 10 10 gold badges 38 38 silver badges 58 58 bronze badges asked Mar 28, 2014 at 2:46 Christian01 Christian01 31 1 1 silver badge 3 3 bronze badgesA 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?
Commented Mar 28, 2014 at 2:48Sorry, 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.
Commented Mar 28, 2014 at 2:53@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?
Commented Mar 28, 2014 at 3:20I'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.
Commented Mar 28, 2014 at 3:29I created a small JSFiddle.
Is this what you are looking for?
div < width: 500px; >div p
This looks like what you had for CSS, but I have it doing it for each paragraph.
answered Mar 28, 2014 at 3:52 Patrick Allen Patrick Allen 2,168 2 2 gold badges 17 17 silver badges 20 20 bronze badges Almost. Would there be a way to have it "reset" each time there's atags.
Commented Mar 28, 2014 at 4:00By 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.
Commented Mar 28, 2014 at 4:02I'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
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.
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!
Commented Mar 28, 2014 at 4:15That'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!
Commented Mar 28, 2014 at 4:30From the comments, it seems that by “I want it to ‘reset’ after each line break” you mean that after any
element, the next line should not be indented. Then the answer is no, you can’t do that, since
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
, you should use block elements that wrap blocks of text.
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
, 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
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.
Elit sed vulputate mi sit amet mauris commodo. Sed risus ultricies tristique nulla aliquet enim tortor. Eu turpis egestas pretium aenean pharetra magna.
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.
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.