Question

Is there a simple way to detect a linebreak caused by width limitation within a pre tag and visualize it with a pixmap? (i.e. a small library in js or php which can do that)

In exemplum (desired result):

+---------------------+
|sh foobar -xq blurb ↓|
|          →-stat /tmp|
|                     |
|                     |
|                     |
|                     |
+---------------------+

Note ↓ and → to indicate a linebreak due to width limitation.

Note: I am not seeking for a syntax highlighting library, as I usually only blog about very short snippets, config files or bash commands.

Answer 1

Are you using a fixed-width font? If so, you could count how many characters fit on one line, and if a given line is longer than that, step back through the characters until you hit a space, and split it there.

Even with a flexible layout, you could calculate how many characters can currently fit: Create a hidden <div> with the same font, and add characters to it until its height increases.