CSS如何实现文字云?

时间:2017-04-09 00:23:43

标签: css css3 word-cloud

我尝试用CSS创建一个单词云类型输出。基本上,我有一个div框和X个文本元素,需要进入框内。但是,它们需要具有不同的字体大小。例如,让我说我有这个:

.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来判断这是否可行:

  • 如何避免文本元素的冲突?
  • 如何确保它们保持在盒子的边界内?

1 个答案:

答案 0 :(得分:2)

我认为仅使用CSS制作Word Cloud是不可能的,你需要Javascript函数或类似WordCloud2.js的lib来处理元素定位。

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

参考文献: