font-size vw aanpassen aan div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Danny von Gaal

Danny von Gaal

07/11/2016 12:21:17
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <div id="tileswrapper">
    
        <div class="tile tile-logo">&nbsp;</div>
        <div class="tile tile-cert">&nbsp;</div>
        <div id="flip">
            <div class="tile tile-pwd front">
                <p class="text-center">Klik voor<br/>wachtwoord</p>
            </div>
            <div class="tile tile-pwd back">
                <p class="text-center">435DFGrfghjghjghjf45</p>
            </div>
        </div>
        <div class="tile tile-help">&nbsp;</div>
    
    </div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
#flip, .tile-pwd {
    font-size: 4vw;
    width: 466px;
    height: 258px;
}
 
PHP hulp

PHP hulp

19/10/2018 16:36:48
 
Wesley -

Wesley -

07/11/2016 13:40:57
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@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..

En anders heb je zo iets:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
p {
    font-size: 30px;
    font-size: 3.5vw;
}


Maar dan is het gebaseerd op de viewport.
Gewijzigd op 07/11/2016 13:43:31 door Wesley -
 
Danny von Gaal

Danny von Gaal

07/11/2016 13:43:25
Quote Anchor link
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.
Gewijzigd op 07/11/2016 13:45:08 door Danny von Gaal
 
Wesley -

Wesley -

07/11/2016 13:45:36
Quote Anchor link
Danny von Gaal op 07/11/2016 13:43:25:
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.
 
Danny von Gaal

Danny von Gaal

07/11/2016 14:05:44
Quote Anchor link
Ja dat ga ik ook doen. Maar ik wil toch voorkomen dat mensen het verkeerd kopieren. Het is voor mijn werk en ik zie hoe raar gebruikers soms klikken.
 
Wesley -

Wesley -

07/11/2016 14:59:05
Quote Anchor link
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 ;)
 
Ozzie PHP

Ozzie PHP

07/11/2016 17:55:58
Quote Anchor link
Danny,

Ik heb wat voor je gefixt (in normale en schone code). Wellicht kun je hier iets mee ...

Als je het formaat van het browservenster aanpast, zul je zien dat de tekst keurig meeschaalt.

Enjoy ;-)

https://jsfiddle.net/7ckt3bar/1/
 
Danny von Gaal

Danny von Gaal

07/11/2016 18:38:28
Quote Anchor link
Hallo Ozzie,

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.

https://jsfiddle.net/7ckt3bar/3/
 
Ozzie PHP

Ozzie PHP

07/11/2016 21:39:16
Quote Anchor link
>> 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.
 
Danny von Gaal

Danny von Gaal

08/11/2016 08:29:29
Quote Anchor link
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.
Gewijzigd op 08/11/2016 08:29:53 door Danny von Gaal
 
Wouter J

Wouter J

08/11/2016 10:25:29
Quote Anchor link
Dit kan niet met CSS alleen. Hier zul je wat JavaScipt voor moeten gebruiken, zoals FitText.js of zelf wat regeltjes schrijven: http://stackoverflow.com/a/4166021/1149495
 
Ozzie PHP

Ozzie PHP

08/11/2016 16:00:32
Quote Anchor link
>> en in de toekomst wordt dit misschien verhoogt naar 10

Tja ... ik lees "in de toekomst" en ik lees "misschien".

Dat zijn maar liefst 2 onzekerheden. Wat houdt je tegen om het nu in te richten voor 8 tekens en ALS het er ooit 10 worden even de font-size aan te passen?

Begrijp me niet verkeerd hoor. Van mij mag je gerust een javascript oplossing implementeren, maar je bouwt dan iets in "voor het geval misschien ooit wie weet in de toekomst".

Ik zou zeggen, stel de font-size nu gewoon vast in, en verander dat getalletje als het ooit 10 tekens worden. ;-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.