Определить точку переноса текста вне родительского элемента?

Question

Возможно ли, используя CSS/JS/jQuery/etc. определить точку переноса для текста вне родительского элемента?

Причина, по которой я спрашиваю об этом, заключается в том, что я хотел бы разделить текст на более мелкие части, сохраняя при этом впечатление, что все это содержится в одном элементе. Например, представьте себе, что div размером 300px в ширину и высоту, и имеет текст как контент. Я хотел бы иметь возможность разделить этот div на сетку из 3 x 3 div, которые все 100px x 100px, но придают внешний вид непрерывного текста, манипулируя позиционированием текста внутри меньших div.

Поскольку это немного трудно объяснить, вот образ того, что я имею в виду:

Причина Я хочу сделать это, потому что я хочу, чтобы иметь возможность сделать некоторые CSS3 3D-преобразования с текст, не превращаясь в изображение, см., например, http://www.joelambert.co.uk/flux/ -> Tiles3D

Возможно ли это?

Answer 1

Если вы хотите достичь покадрово 3D эффекта преобразования, может быть другое решение:

Вы можете дублировать текст-DIV в каждый сНу блок и поместите его с position: absolute; в каждом блоке и скрыть его с overflow: hidden;. Затем у вас снова появится впечатление, что это один большой текстовый блок.

Затем вы можете преобразовать эти divs по блоку.

Я построил короткий скрипку, чтобы показать вам, как я имею в виду это, должно работать достаточно хорошо:

JS-Fiddle

Answer 2

Может быть CSS3 Столбцы могут помочь:

#con{background-color: #DDDDDD; 
padding: 10px; 
font-family: Verdana, Geneva, sans-serif; 
font-size: 12pt; 
color: #888888; 
text-align: left; 
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3; 
-webkit-column-gap: 35px; 
-moz-column-gap: 35px; 
column-gap: 35px; 
} 

jsFiddle