1

There is a solution that is similar to my need, but it does not address the problem I have.

I have a body of text (a poem) wherein there are new lines and stylistic tab spaces. It's quite a long poem but here is an idea of what is in the HTML file:

<div class="poem1">
    <p>
        Lorem ipsum dolor sit amet
        consectetur adipiscing elit
          sed do eiusmod tempor incididunt ut labore

        et dolore magna aliqua.
          Ut enim ad minim veniam
        quis nostrud exercitation ullamco
     </p>
 </div>

The corresponding CSS I used to preserve the newlines and stylistic tabs (as guided by the mentioned solution) is as follows:

p {
    white-space: pre;
}

The above "works", however, since the poem is indented in the paragraph tags in the HTML file, the indentation is also preserved, i.e. the poems formatting is preserved (like I need) but the poem is now indented and therefore positioned further to the right on the containing div than where it ought to be.

In the CSS, I've tried setting white-space to pre-line and pre-wrap.

setting to pre-line ignores the indentation and positions the poem correctly but removes the stylistic tabs.

setting to pre-wrap does the same as pre (preserves the stylistic tabs but also keeps indentation) however it wraps the longer lines of text.

So I'm looking for a solution that will preserve the stylistic tabs but not the indentation.


I could manually format the poems by setting white-sapce to pre-line and insert &nbsp in all of the places where the stylistic tab is required but that will be tedious because the poems are 50+ lines long and there a many of them.

Another solution is to keep white-sapce set to pre and remove the indentation, like such (which produces the display/output I need):

<div class="poem1">
    <p>
Lorem ipsum dolor sit amet
consectetur adipiscing elit
  sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua.
  Ut enim ad minim veniam
quis nostrud exercitation ullamco
     </p>
 </div>

but that won't be well formatted code.

So, I would like to know if it is possible to modify my code to remove the indentation that is included when I set white-space to pre

MingLi
  • 53
  • 1
  • 9
  • @ThomasL. Thank you, it solves my problem. Not an elegant solution but a solution nonetheless. – MingLi Jun 08 '22 at 12:26

0 Answers0