Have you used Lorem Ipsum or something like it to see how text renders in something you’re building? It’s a helpful little thing that often starts like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ante…

Most of the time filler text is sufficient, but sometimes you want something even less attention-grabbing. For example, it might be desirable to ensure that someone reviewing your work-in-progress is not concentrating on what they’re reading.

Enter Lorem Dashum, a tiny bit of CSS that’ll render various-length dashes in place of filler text. Here’s how it looks:

Donec id urna leo. Donec id placerat ipsum, vel lobortis leo. Quisque a lobortis lorem. Cras eu felis dapibus, malesuada nunc vel, dignissim felis. Proin ultrices at metus a venenatis. Nulla ac neque sagittis, pretium augue sit amet, porttitor urna. Pellentesque fringilla in lectus posuere efficitur. Etiam a ex vitae diam tempus fringilla.

If you inspect this page or look at it in CodePen, you’ll see that the CSS sets the actual filler text to transparent, then it plops in a repeated background image of various-length dashes via an encoded SVG. It’s fairly simple and we hope it does a good job of conveying actual text will be here soon, please pay no attention to this content.

If you know of any issues or have any ideas for improvement, please send us a note and/or fork it on CodePen and tinker with it. Thanks for reading!