定義父元素外部的文字環繞點？

是否有可能使用CSS/JS/jQuery /等。定義父元素之外的文本的包裝點？定義父元素外部的文字環繞點？

我問這個問題的原因是，我希望能夠將文本拆分成更小的部分，同時仍然給人以全部包含在一個元素中的印象。例如，假設一個寬度爲300px的div，並且內容爲文本。我希望能夠將這個div分割成3 x 3的div，它們都是100px x 100px，但是通過操縱較小的div內的文本位置來顯示連續的文本。

由於這是一個有點難以解釋，這裏是我的意思圖片：

enter image description here

原因我想這樣做，是因爲我希望能夠做一些CSS3 3D變換與文字沒有變成圖像，看例如http://www.joelambert.co.uk/flux/ - > Tiles3D

這可能嗎？

來源

2013-04-16 Schlaus

爲什麼你要分裂這樣的文字？當然，你寧願分裂在句子裏面？ – Bill

因爲我希望能夠使用文本進行一些CSS3 3D轉換，而不會變成圖像。見例如http://www.joelambert.co.uk/flux/ - > Tiles3D – Schlaus

如果你想實現按塊3D轉換效果，有可能是另一種解決方案：

你可以複製文本的DIV到每塊每一個DIV塊，並將其與position: absolute;位置和overflow: hidden;隱藏它。然後你會再次覺得這是一個大文本塊。

然後你就可以變換這些div的塊狀。

我建了一個簡短小提琴告訴你我是多麼的意思是，應該工作得很好：

JS-Fiddle

來源

2013-04-16 11:35:28 nirazul

謝謝！這正是我所期待的！儘管我的問題並不是最清晰的問題，但做得很完美。 :) – Schlaus

也許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

來源

2013-04-16 11:36:18 defau1t

感謝您的答案，但不幸的是，這並沒有達到我期待的效果。查看我添加到問題的鏈接，以更好地解釋我在找什麼。 – Schlaus

爲什麼不檢查閱讀我在githiub上的文件https://github.com/joelambert/Flux-Slider – defau1t

定義父元素外部的文字環繞點？

回答

相關問題