GitHub Markdown: How can I get rid of text wrap?

Question

I'm trying to embed images of my site into README.MD, and I want each image to be on its own line. But for images that aren't very wide, it's showing them on the same line. And it also wraps all text around the images that aren't wide enough to fill a line.

I've tried adding <br /> tags, adding display="block" to the <a> tag and adding two spaces at the end of the preceding line. Nothing is working.

Surely there's a way to do this, right?

Added 2 empty lines.

Ethan
– Ethan

2022-07-31 02:17:13 +00:00
Commented Jul 31, 2022 at 2:17 — Ethan
– Ethan, Commented Jul 31, 2022 at 2:17

Matt · Accepted Answer · 2022-07-30 08:59:34Z

Image on its own line

Add two spaces at the end of the paragraph before and at the end of the image syntax to place the image on its own line (see hard line break):

Lorem ipsum dolor  
![alt text](/path/to/image.png)  
Donec vulputate neque ...

^{^ Note the two spaces at the end of line 1 and line 2 in the snippet above.}

This is rendered as follows (simplified):

<p>Lorem ipsum dolor<br>
<img src="/path/to/image.png" alt="alt text" style="max-width: 100%;"><br>
Donec vulputate neque ...</p>

Image in its own paragraph

Leave an empty line before and after the image to place it on its own paragraph:

Lorem ipsum dolor

![alt text](/path/to/image.png)

Donec vulputate neque ...

This is rendered as follows (simplified):

<p>Lorem ipsum dolor</p>
<p><img src="/path/to/image.png" alt="alt text" style="max-width: 100%;"></p>
<p>Donec vulputate neque ...</p>

Collectives™ on Stack Overflow

GitHub Markdown: How can I get rid of text wrap?

1 Answer 1

Image on its own line

Image in its own paragraph

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Image on its own line

Image in its own paragraph

Comments

Your Answer

Sign up or log in

Post as a guest

Related