2017-04-09 22 views
0

Ich versuche, eine Wortwolke Typ Ausgabe nur mit CSS zu erstellen. Grundsätzlich habe ich eine Div-Box und eine X-Zahl von Textelementen, die in die Box gehen müssen. Sie müssen jedoch unterschiedliche Schriftgrößen haben. Zum Beispiel, sagen wir, ich habe dies:CSS Wie erreicht man eine Wortwolke?

.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; } 

ich die Textelemente in der Box positionieren kann, aber ich habe ein paar Fragen in Bezug auf das Layout. Mein Mangel an gründlichem CSS-Wissen hindert mich daran, zu sagen, ob dies überhaupt nur mit CSS möglich ist:

  • Wie kann ich die Kollision der Textelemente vermeiden?
  • Wie kann ich sicherstellen, dass sie innerhalb der Grenzen der Box bleiben?
  • +0

    Stellen Sie einen minimalen Code Arbeits Schnipsel, die das Problem reproduzieren – LGSon

    +0

    ich noch kein Konto haben und mein Problem weiß ich nicht wirklich, wie man das macht und ob es möglich ist. Im Grunde, was ich versuche zu erreichen, ist dies: 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

    +1

    Sie können einige Ideen von http://varya.me/en/posts/pseudo-tag-cloud-css/ erhalten, es verwendet ': N-Typ () 'Pseudoklasse – Andriy

    Antwort

    Verwandte Themen