Ik wil dat de font-size in mijn div zich aanpast aan de breedte van mijn div. Dus wanneer er text in komt dat langer is dan de breedte van de div dat de font-grootte kleiner wordt.
Dit is wat ik heb alleen de font-size: 4vw; wordt alleen toegepast op mijn schermgrootte en niet op die van mijn div. De tekst komt nog steeds voorbij de div en wordt alleen kleiner als ik heel mijn browser klein maak.
Wil je dit echt, omdat je het wil? Of omdat je niet wil dat de text uit de div komt. Anders zou ik eerder word-wrap: break-word; gebruiken.
Heb even meegezocht, het kan op de "ugly" manier, maar dat is wel CSS only.
@media all and (min-width: 50px) { body { font-size:0.1em; } }
@media all and (min-width: 100px) { body { font-size:0.2em; } }
@media all and (min-width: 200px) { body { font-size:0.4em; } }
@media all and (min-width: 300px) { body { font-size:0.6em; } }
@media all and (min-width: 400px) { body { font-size:0.8em; } }
@media all and (min-width: 500px) { body { font-size:1.0em; } }
@media all and (min-width: 600px) { body { font-size:1.2em; } }
@media all and (min-width: 700px) { body { font-size:1.4em; } }
@media all and (min-width: 800px) { body { font-size:1.6em; } }
@media all and (min-width: 900px) { body { font-size:1.8em; } }
@media all and (min-width: 1000px) { body { font-size:2.0em; } }
@media all and (min-width: 1100px) { body { font-size:2.2em; } }
@media all and (min-width: 1200px) { body { font-size:2.4em; } }
@media all and (min-width: 1300px) { body { font-size:2.6em; } }
@media all and (min-width: 1400px) { body { font-size:2.8em; } }
@media all and (min-width: 1500px) { body { font-size:3.0em; } }
@media all and (min-width: 1500px) { body { font-size:3.2em; } }
@media all and (min-width: 1600px) { body { font-size:3.4em; } }
@media all and (min-width: 1700px) { body { font-size:3.6em; } }
Anders kom je toch al snel op javascript meen ik te lezen..
Oké, dat is wel lelijk inderdaad.
De reden waarom ik geen word-wrap wil gebruiken is omdat ik het graag op een regel wil houden. In de div komt namelijk een wachtwoord te staan en dit kunnen gebruikers eruit kopieren. Als ik het wachtwoord breek dan zullen er vast een paar zijn die het niet goed kopieren.
De reden dat ik de font-grootte wil veranderen is omdat ik nu nog niet weet of het wachtwoord van 8 characters in de toekomst misschien wel niet meer characters wordt.
Maar als ik de font grootte in vw aangeef dan veranderd het wel naar mate het scherm grooter/kleiner wordt. Volgens mij kan dit ook aan de hand van de breedte van een div.
In de div komt namelijk een wachtwoord te staan en dit kunnen gebruikers eruit kopieren. Als ik het wachtwoord breek dan zullen er vast een paar zijn die het niet goed kopieren.
Misschien een alternatief voor je, maak een knop onder het wachtwoord Copy to clipboard, of kopieer hier het wachtwoord.
rare gebruikers zul je altijd houden, en ze allemaal afvangen is bijna onmogelijk. Je weet als je iets kopieert dat je nauwkeurig moet kijken, als er een knop voor is en je gebruikt die niet is dat je eigen fout als het niet lukt. Gewoon een melding terug laten komen dat het wachtwoord verkeerd is en je hebt het netjes afgevangen. Meer kan je dan niet doen, vind ik ;)
Bedankt voor de moeite die je hebt genomen. Alleen ik wil dat de tekst kleiner wordt wanneer er meer tekst in de div komt en dit dan alsnog op een regel blijft staan.
Ik heb je fiddle aangepast en de div een width gegeven en de tekst vermeerderd en dan valt het ook buiten de div.
>> Alleen ik wil dat de tekst kleiner wordt wanneer er meer tekst in de div komt en dit dan alsnog op een regel blijft staan.
Dat klinkt als een verkeerde insteek. Je moet van tevoren dan al een idee hebben van wat de maximale lengte is, en die moet je dan leidend maken ... want wat als het ineens een tekst is van 100 tekens? Dan krijg je letters die zo klein zijn dat ze onmogelijk te lezen zijn.
Je zult dan dus een keuze moeten maken hoeveel tekens het maximaal mag zijn, en daar moet je dan vanuit gaan.
Er komt ook een max aantal tekens op het veld te staan. Alleen nu bestaat een wachtwoord nog uit 8 tekens en in de toekomst wordt dit misschien verhoogt naar 10. Dan wil ik niet dat die twee extra tekens ineens buiten het veld vallen.
Ik weet zeker dat dit kan want ik heb het wel is vaker gezien. Maar misschien moet ik inderdaad met javascript gaan werken dan.
