2016-06-29 70 views
15

Ho un div con larghezza di 70%, ed ecco cosa voglio fare:CSS: è possibile adattare la dimensione del carattere alla larghezza div?

  • mettere alcune parole che div
  • adattare la dimensione del carattere in modo che quelle parole occupano tutta la larghezza della div

È possibile solo con css? Ecco il mio codice:

.parent { 
 
    width:70%; 
 
    height:auto; 
 
    min-height:100px; 
 
    background:red; 
 
    font-size:10vw; 
 
}
Please help me to change the font-size dynamically to the parent class 
 
<hr> 
 
<div class="parent"> 
 
    This Text 
 
</div>

Nota: la dimensione del div è sensibile, questo è importante. Grazie in anticipo!

+0

si desidera modificare sise carattere in base al contenuto nel giusto div? –

+0

si voglio riempire il div con il mio testo –

+0

Vuoi altezza di div per essere riparato o variabile ?? –

risposta

3

Forse non proprio quello che stai cercando, ma qualcosa - Puoi rendere sia il carattere che l'elemento relativo alla larghezza di visualizzazione.

p { 
 
    font-size: 5vw; 
 
    background-color: red; 
 
    width: 50vw; 
 
}
<p> 
 
    I'm a P! 
 
</p>

-1

Si, pero 'penso che è necessario utilizzare JS (jQuery).

JS:

$(function(){ 

var box = $('.box'); 
var boxWith = box.width(); 

$('.box h1').css('font-size',boxWith); 

}); 

https://jsfiddle.net/moongod101/sdfaatp8/

+0

Voglio riempire il div con il mio testo, non cambiare la dimensione del font come la larghezza div, ma il suo codice utile, grazie. –

+0

Vuoi che il testo riempia il div in posizione X? E se puoi, per favore, fare un'immagine per mostrarmi quello che vuoi, grazie. –

+0

Vedere l'immagine sopra –

0
**You can change font-size:10vh;** 
     .parent { 
     width:70%; 
     height:auto; 
     min-height:100px; 
     background:red; 
     color:white; 
     font-size:10vh; 
    } 
    Please help me to change the font-size dynamically to the parent class 
    <hr> 
    <div class="parent"> 
     Text 
    </div> 
-2

Qui, ho aggiornato che .... JS Fiddel

tenta di utilizzare

css

.parent 
{ 
     width:70%; 
     height:auto; 
     min-height:100px; 
     background:red; 
     font-size:10vw;   
    } 



span{ 
     display:inline-block; 
     transform:scale(1.8,1); 
     -webkit-transform:scale(3,1); 
} 

HTML

<div class="parent"> 
    <span>This Text</span> 
</div> 
+0

Questo non funzionerà, perché gli elementi 'display: inline' non possono avere la loro larghezza o altezza impostata - è sempre derivato dal loro contenuto. – Beejamin

+1

Il mio div ha una larghezza –

+0

qui ho aggiornato [JS Fiddel] (https://jsfiddle.net/np5n8m8a/10/) – shivani

1

Basta aggiungere display: inline; nel codice

.parent { 
 
    width:70%; 
 
    height:auto; 
 
    min-height:100px; 
 
    background:red; 
 
    font-size:10vw; 
 
    display: inline; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.parent { 
 
    width:70%; 
 
    height:auto; 
 
    min-height:100px; 
 
    background:red; 
 
    font-size:10vw; 
 
    display: inline; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="parent"> 
 
    This Text 
 
</div> 
 

 
</body> 
 
</html>

Problemi correlati