<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <body> <table width="600" border="1" cellspacing="0" cellpadding="0"> <tr> <td><span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> <span>[•] this line should not break</span> </td> </tr> </table> </body> </html> Code (markup):
That code uses bullets and not the images mentioned. @stats, can we use lists and additional classes?
there's one little step that you need to do to come up with a satisfying solution (although not a general solution to the problem, but a solution in my case) here is what is missing: the [•] thing is not good .. if you can find me 2 symbols that html (and, of course, my pdf generator) will convert to something like 1.) checked box 2.) unchecked box, i will count this as a solution Although this will not solve the general problem with the image staying in the same line with the text, but in my case i only use 2 little images .. one is a checked box image, one is an unchecked box image .. so come up with those special chars and you win
Use anything that you want, the only precondition is that "you have no idea how long each text snippet can be" .. that will mean you don't have a right to put any hard positioning markup in fixed positions (such as using <br> where you would like it to be or using <table> to fix each snippet's position or using any tag with CSS forcing it to stay at a fixed coordinate such as "margin" or "padding"), also keep in mind that i want the text to be as compact as possible so you can not put line breaks after each snippet just in case .. if 2 snippets can fit on a same line - they MUST be on the same line just always keep in mind that you don't know the length of each text snippet (the ones inside the <span> in my example), and your goal is to make those snippets to either stay on same line if they completely fit, or stay on separate lines as a single entity .. meaning to NOT break any of the unknown-length snippet in the middle of it