CSS: Czy możliwe jest dostosowanie rozmiaru czcionki do szerokości div?

Mam div z 70% szerokości, i oto, co chcę zrobić:CSS: Czy możliwe jest dostosowanie rozmiaru czcionki do szerokości div?

umieścić kilka słów w tym div
dostosowania rozmiaru czcionki tak, że te słowa zajmują wszystkie div szerokość

Czy jest to możliwe tylko przy użyciu css? Tu jest mój kodu:

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

Uwaga: rozmiar div reaguje, to jest ważne. Z góry dziękuję!

Źródło

2016-06-29 Engkus Kusnadi

chcesz zmienić sise czcionki w zależności od zawartości w prawej div? –

tak chcę wypełnić div moim tekstem –

Czy chcesz, aby wysokość div była stała lub zmienna? –

Być może nie do końca to, czego szukasz, ale coś - możesz ustawić czcionkę i element względem szerokości widoku.

p { 
 
    font-size: 5vw; 
 
    background-color: red; 
 
    width: 50vw; 
 
}

<p> 
 
    I'm a P! 
 
</p>

Źródło

2016-06-29 03:06:06

-1

Tak, ale myślę, że trzeba użyć JS (jQuery).

JS:

$(function(){ 

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

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

});

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

Źródło

2016-06-29 03:08:23

Chcę wypełnić div moim tekstem, a nie zmieniać rozmiaru czcionki tak samo jak szerokość div, ale jego przydatny kod, dzięki. –

Czy chcesz, aby tekst wypełnił div na pozycji X? I jeśli możesz zrobić zdjęcie, aby pokazać mi, co chcesz, dzięki. –

Zobacz zdjęcie powyżej –

**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>

Źródło

2016-06-29 03:46:17

-2

Tutaj zaktualizowałem go .... JS Fiddel

spróbuje użyć

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>

Źródło

2016-06-29 04:57:06 shivani

To nie zadziała, ponieważ elementy, które są "display: inline" nie mogą mieć ustawionej szerokości ani wysokości - zawsze pochodzą z ich zawartości. – Beejamin

Mój div ma szerokość –

tutaj Zaktualizowałem [JS Fiddel] (https://jsfiddle.net/np5n8m8a/10/) – shivani

Po prostu trzeba dodać display: inline; w kodzie

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

Źródło

2018-02-07 20:56:22 Marina

CSS: Czy możliwe jest dostosowanie rozmiaru czcionki do szerokości div?

Odpowiedz

Powiązane problemy