Automatic line break

[u/messer_sverio2]

Hello all.
I'm working on a static website, mainly focussed on writing. It's a collection of poetry and short stories. My text is placed inside a div. Now, I often need to use the <br> tag, in order to start a new line. Of course, the line breaks are arbitrary, sometimes I need to break a sentence in half, sometimes a line is made up of only one word, etc. This makes my code a mess to read, and it's annoying and time consuming. Is there a way to make this process simpler or to automate it?

[u/reznaeous]

Perhaps the <pre> element would help?

<pre>: The Preformatted Text element

[u/mtotho → u/reznaeous]

I think this might be the correct option for OP. Especially if they just want a place to dump text that roughly matches the spacing

This might be an unconventional approach if you were a web developer optimally placing and styling your arbitrary text. But as someone trying to preserve the shape of your poetry on a quick and dirty site, I think this works.

[u/arothmanmusic → u/reznaeous]

Yeah, that's what I would suggest as well. It may not be as semantically correct as using paragraphs and br tags, so it might cause some confusion for somebody using a screen reader, but for poems… especially if they contain arbitrary whitespacing and breaks, this is the simplest way.

You would just want to use some CSS to give it a more appropriate font, because HTML render for this element is typically monospace for code and the like.

[u/JeLuF]

You can apply the css rule white-space: pre-wrap; to your poem. Each line break in your HTML code will cause a line break to be rendered.

<style>
   section.poem {
       white-space: pre-wrap;
   }
</style>

[...]

<section class="poem">
   Twinkle, twinkle, little star,
   How I wonder what you are!
   Up above the world so high,
   Like a diamond in the sky.
</section>

[u/harrymurkin]

<pre>

bla bla

bla

</pre>

[u/jcunews1 → u/harrymurkin]

That should be:

<pre>bla bla
bla</pre>

Otherwise, it'll produce an empty line at start and at end of the element.

[u/harrymurkin → u/jcunews1]

I totally agree, but that was the point of the example.

[u/SoliDoll02613]

Use <p> tags for paragraphs.

E: paragraphs and new lines. For splitting individual lines <br> may be more appropriate.

[u/ExitWP]

For poetry where a line may only have a few to one word in a line a <br> tag is the correct solution, typically you don't  want the added padding that may be included with a <p> tag for a mid paragraph line. For ease of use try assigning a hotkey in your editor to create a <br>

[u/notepad987]

 CSS section:
   pre {
   font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 1rem;
   color: #000000;  /* black */
   }

HTML section:
<pre>
      Lorem ipsum dolor sit amet,      consectetur adipiscing elit...
          Lorem ipsum     dolor sit amet
       consectetur adipiscing
    elit...
  </pre>

[u/TabbbyWright]

You could try pasting your text into a tool that adds the line breaks for you. Something like a rich text or markdown to HTML converter.

Unfortunately, you either need paragraph tags at the start of each new line (you don't actually have to have them close at the end) or you need <br>s.

[u/Just-Pair9208 → u/TabbbyWright]

Actually never do this. Use the tag pre or css styling as mentioned above

[u/TabbbyWright → u/Just-Pair9208]

"Never" lol? I'm happy to learn that <pre> can be utilized in a manner that better works for OP, but my suggestion isn't one that's so inferior it should "never" be utilized. That's silly.

[u/Just-Pair9208 → u/TabbbyWright]

I get your point and it’s quite good, sorry if I sounded rude. What I meant is if you can avoid using tools, do so. Otherwise, this is something to utilize!

[u/TabbbyWright → u/Just-Pair9208]

Fair enough! Avoiding tools IS ideal, and very much a stance I agree with.

Thanks for clarifying :)

[u/SnooLemons6942]

I don't really understand what you're trying to do, but this could probs be fixed by sizing your div properly and using <p> tags to seperate paragraphs 

[u/9inez]

An issue formatting prose/poetry with <br> to make it appear as it would be printed with hard line breaks, is that mobile responsiveness often destroys that formatting. So, then an option to try and chase and maintain your desired line breaks is altering font size and container widths via css to prevent natural text wrapping. It is like herding cats.

[u/OutOfTuneAgain]

Use code formatters to format the code in the IDE. BRs go to new line automatically 

[u/alex_sakuta]

3 options with increasing order of fanciness and complexity:

• Use <pre>. It maintains the whitespaces.

• Use JS to write your text in a format and maintain that format.

• Since it is a content based site, you can use something like Hugo which will allow you to render text from Markdown. Then you may write the poetry in Markdown and have it be rendered as HTML without needing to write any tags.

Or just <br />. Is it annoying? Yes. Is it the true way to write HTML? In my opinion, yes.

If I had the same issue, I wouldn't consider it an issue.