Indent Overflow Text Wrapping with CSS/Javascript

76 Views Asked by At

I have a a list of text strings, each entry marked up as the contents of a discrete span and all the spans contained in a flexbox div that stacks them vertically. This creates a nice list. For reasons of visual design I have this list formatted to be taller than it is wide, and some of the entries don't fit on a single line, horizontally. Naturally, the browser inserts line breaks in order to display all the content. This is desired behavior, but an unfortunate side effect is that it can become hard to visually distinguish discrete entries on the list from line breaks forced by the document's overflow properties. I've used various method to mitigate this elsewhere in my project, but for this particular type of list I'd like to indent the children of all line breaks forced by overflow, while leaving the start of each span non-indented. This would greatly clarify reading through the list as the start of each entry would sit further left than would overflow linebreaks within a single entry. Is there any means of accomplishing this with CSS and JS?

0

There are 0 best solutions below