CSS如何實現詞雲？

我正試圖用CSS創建一個文字雲類型輸出。基本上，我有一個div盒和X數量的文本元素，需要在盒子裏面。但是，它們需要具有不同的字體大小。例如，假設我擁有這個：CSS如何實現詞雲？

.box { display: flex; width: 40vw; height: 30vw; overflow: hidden; } 
.text1 { font-size: 5vw; } 
.text2 { font-size: 4vw; } 
.text3 { font-size: 3.5vw; } 
.text4 { font-size: 3vw; }

我可以將文本元素放置在框中，但是我有幾個關於佈局的問題。我缺乏徹底的CSS知識，無法告訴我是否可以使用CSS或不可以：

如何避免文本元素的衝突？
我怎樣才能確保他們留在箱子的邊界內？

來源

2017-04-09 user3552829

郵報，重現該問題最小的代碼片段工作我 – LGSon

沒有一個和我的問題我真的不知道該怎麼做，如果可能的話。基本上，我想實現的是這樣的：https：//thumb9.shutterstock.com/display_pic_with_logo/279553/362180666/stock-vector-vector-concept-abstract-business-success-marketing-word-cloud-wordcloud- on-background-for-business-362180666.jpg – user3552829

你可以從http://varya.me/en/posts/pseudo-tag-cloud-css/得到一些想法，它使用'：nth-of-type ）'僞類 – Andriy

我認爲使用CSS製作Word Cloud是不可能的，您需要使用Javascript函數或像處理元素定位的像WordCloud2.js這樣的lib。

演示： https://timdream.org/wordcloud/#wikipedia:Cloud

參考文獻：

來源

2017-04-09 00:43:29

CSS如何實現詞雲？

回答

相關問題