2

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

我问这个的原因是我希望能够将文本拆分成更小的部分,同时仍然给人一种它全部包含在一个元素中的印象。例如,想象一个 300px 宽和高的 div,其内容为文本。我希望能够将此 div 拆分为 3 x 3 div 的网格,这些 div 都是 100px x 100px 但通过操纵较小 div 内的文本定位来呈现连续文本的外观。

由于这有点难以解释,这里是我的意思的图像:

在此处输入图像描述

我想这样做的原因是因为我希望能够对文本进行一些 CSS3 3D 转换而不变成图像,例如参见http://www.joelambert.co.uk/flux/ --> Tiles3D

这可能吗?

4

2 回答 2

2

如果要实现分块的3D变换效果,可能还有另一种解决方案:

您可以将 text-div 复制到每个 div 块中,并将其position: absolute;放置在每个块中并使用overflow: hidden;. 然后,您将再次感觉到这是一个大文本块。

然后,您就可以按块转换这些 div。

我构建了一个简短的 Fiddle 来向您展示我的意思,应该可以很好地工作:

JS-小提琴

于 2013-04-16T11:35:28.403 回答
0

也许 CSS3 Columns 可以提供帮助:

#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

于 2013-04-16T11:36:18.343 回答