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如何实现词云？

回答

相关问题