Menu
I have some code inside an HTML document. The code itself is not important – I've used lorem ipsum to make this clear.
<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet diam sit amet sem accumsan faucibus ac in arcu. Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</code></pre> I've applied white-space: pre-wrap to the code block to force long lines to wrap as necessary. I'd like to know whether it's possible to indent the wrapped portion of the wrapped lines, to give something like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet diam sit amet sem accumsan faucibus ac in arcu. Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros. 
368
You can use the CSS text-indent property to indent text in any block container, including divs, headings, asides, articles, blockquotes, and list elements. Say you want to indent all div elements containing text on a page to the right by 50px. Then, using the CSS type selector div, set the text-indent property to 50px.
Indent All the Lines of Block in HTML using CSSUse padding-left property. This is how it looks like. You can also use the margin-left here. But you should understand the difference between “padding” and “margin”.
Explanation: The text-indent property in CSS is used to define the indentation of the first line in each block of text.
Output: Method 2: By making the position relative to the first line, set the text-indent to -26px and padding-left value to 26px. Here in this example, we have made the position of the second line relative to the first line. So the second line is indented/aligned according to the first line.
It is kind of possible... I'm not using using the <pre> and <code> tags and I'm not sure how important these tags are to you... but I've been able to get the style you're looking for and mimick the formatting as best as I could. Check it out.
http://jsfiddle.net/PVZW5/7/
div { margin-left:24px; width:400px; } p { font-family: "Courier New", Courier, monospace; font-weight: normal; font-style: normal; font-size: 13px; margin:0 28px; text-indent: -28px; } <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.</p> <p>Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</p> </div> Take a look at this SO question and some solutions that have come from it. It is relevant to your question. It might be worth your time to take a look :)
I hope this helps!
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
