Я новичок в css и удивляюсь, возможно ли добиться переноса текста по-своему с помощью css. Допустим, у меня есть отчет с 6 столбцами. Каждый столбец имеет свое выравнивание, и начальное состояние отчета:
|| col1 centered || col2 centered ||col3 left align || col4 right||
После изменения размера браузера, сужения его, первый столбец переполняется вторым и происходит перенос:
|| col1 centered
|| col2 centered ||col3 left align || col4 right||
Далее, сужение чуть больше, текст в третьем столбце перекрывает текст в крайнем правом столбце, и это заставляет четвертый столбец переноситься следующим образом:
|| col1 centered
|| col2 centered ||col3 left align
|| col4 right align ||
В конце, когда браузер не может быть сужен больше, переносимая строка переносится по лестнице где каждый шаг - это текст определенного начального столбца, а отчет выглядит так:
|| col1 centered
|| col2 centered
|| col3 left align
|| col4 right align
Я пытался играть с блоками, встроенными блоками, но не смог добиться переноса по лестнице. Какие css методы / объекты наиболее подходят для достижения обтекания на лестнице, как описано выше?