在父元素外定义文本换行点？

Question

是否有可能，使用CSS / JS / jQuery /等。为父元素外部的文本定义包装点？

我之所以这样问是因为我希望能够将文本分成更小的部分，同时仍然给人的印象是它都包含在一个元素中。例如，想象一个300px宽和高的div，并且有文本作为内容。我希望能够将这个div分成3 x 3 div的网格，这些div都是100px x 100px但通过操作较小div中的文本定位来呈现连续文本。

由于这有点难以解释，这是我的意思的图像：

我想要这样做的原因是因为我希望能够使用文本进行一些CSS3 3D变换而不会变成图像，例如参见http://www.joelambert.co.uk/flux/ - ＆gt; Tiles3D

这可能吗？

Answer 1

如果要实现逐块3D变换效果，可能还有另一种解决方案：

您可以将text-div复制到每个div块中，并在每个块中使用position: absolute;进行定位，并使用overflow: hidden;隐藏它。然后，您将再次感觉这是一个大文本块。

然后你就可以逐块转换这些div。

我建立了一个简短的小提琴，告诉你我的意思，应该运作得很好：

  

<强> 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