dynamicznie zmieniając rozmiar czcionki na podstawie długości tekstu przy użyciu css i html

Potrzebuję wyświetlić tekst wprowadzony przez użytkownika w div o stałym rozmiarze. To, czego chcę, to automatyczne dopasowanie rozmiaru czcionki tak, aby tekst wypełniał to pole w jak największym stopniu.dynamicznie zmieniając rozmiar czcionki na podstawie długości tekstu przy użyciu css i html

Prawdopodobnie chciałbym zacząć od maksymalnej wielkości czcionki, a gdy tekst jest zbyt duży, aby zmieścił się w pojemniku, zmniejsz rozmiar czcionki, dopóki nie będzie pasował, a czcionka musi być wyświetlana jako pojedyncza linia. Czy można to zrobić używając tylko css i html.

Źródło

2013-08-14 user2613399

Nie, nie można tego zrobić tylko za pomocą CSS. – robertp

Czy ktoś może mi dostarczyć rozwiązanie za pomocą js – user2613399

Uzyskanie rozmiaru w pikselach ciągu tekstowego jest trudne i zależy w dużej mierze od przeglądarki i ustawień użytkownika, więc prawdopodobnie trudno będzie znaleźć rozwiązanie, które działa we wszystkich przypadkach.

Przez "wyświetl tekst wprowadzony przez użytkownika" masz na myśli, że użytkownik pisze w polu tekstowym? Jeśli tak, możesz dołączyć detektor naciśnięcia klawisza sprawdzającego długość wartości tekstu, a następnie odpowiednio dopasować font-size. Oto przykład, choć prawdopodobnie będziesz musiał zmieniać długości i font-rozmiary do swoich potrzeb:

Working Demo

$('#text').on('keypress', function(e) { 
    var that = $(this), 
     textLength = that.val().length 
    ; 

    if(textLength > 30) { 
     that.css('font-size', '5px'); 
    } else if(textLength > 20) { 
     that.css('font-size', '10px'); 
    } else if(textLength > 10) { 
     that.css('font-size', '15px'); 
    } 
});

Źródło

2013-08-14 12:40:55 cfs

co jeśli tekst jest pobierany z zewnętrznego źródła (użytkownik nie będzie wpisywać w polu), a tekst musi być wyświetlany w div? skąd będziemy znać rozmiar tekstu? – user2613399

Zobacz odpowiedź @ putvande, myślę, że może być tym, co bliżej do tego, czego szukasz – cfs

Powiedzmy, że masz to:

<div id="outer" style="width:200px; height:20px; border:1px solid red;"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div> 
</div>

Wtedy może zrobić coś takiego:

$(document).ready(function() { 
    resize_to_fit(); 
}); 

function resize_to_fit(){ 
    var fontsize = $('div#outer div').css('font-size'); 
    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1); 

    if($('div#outer div').height() >= $('div#outer').height()){ 
     resize_to_fit(); 
    } 
}

robocza Próbka

$(document).ready(function() { 
 
    resize_to_fit(); 
 
}); 
 

 
function resize_to_fit() { 
 
    var fontsize = $('div#outer div').css('font-size'); 
 
    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1); 
 

 
    if ($('div#outer div').height() >= $('div#outer').height()) { 
 
    resize_to_fit(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer" style="width:200px; height:20px; border:1px solid red;"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div> 
 
</div>

Źródło

2013-08-14 12:41:24 putvande

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
     #div1{ 
      width: 200px; 
      height: 200px; 
      font-size: 32px; 
      line-height: 1.2em; 
     } 
    </style> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
    <script> 
     $(function(){ 
      n = 1; 
      while(n==1){ 
       n = 0 
       if ($('#div1 .holder').outerHeight()>$('#div1').outerHeight()){ 
        var fz = parseInt($('#div1').css('font-size')); 
        $('#div1').css({'font-size' : fz-1}); 
        n = 1 
       } else {n = 0} 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div id="div1"> 
     <div class="holder">I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible. 
I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.</div> 
    </div> 
</body> 
</html>

Źródło

2013-08-14 12:47:49 Anon

dlaczego nie użyć wartości boolean zamiast n = 1? – cfs

Jaka jest różnica? To tylko flaga. Napisałem pierwszą rzecz, która przyszła na myśl – Anon

Zazwyczaj flagi to booleans, w przeciwnym razie może to być mylące dla kogoś czytającego twój kod, ponieważ liczba całkowita może wskazywać, że jest więcej niż dwa stany. – cfs

Kto chce dynamiczną funkcję, która zależy od szerokości elementu (na podstawie odpowiedzi putvande):

 $(document).ready(function() { 
      var arrEl = ['div1', 'div2', 'div3']; 
      resize_to_fit(arrEl); 
     }); 

     function resize_to_fit(arr){ 
      for (var el in arr) { 
       var jEl = $('.' + arr[el] + ' span'); 
       var fontsize = jEl.css('font-size'); 
       jEl.css('fontSize', parseFloat(fontsize) - 1); 
       if (jEl.width() >= $('.' + arr[el]).width()){ 
        resize_to_fit([arr[el]]); 
       }   
      } 
     }

i HTML:

<div class="div1"> 
    <span>Lorem Ipsum</span> 
</div> 
<br/> 
<div class="div2"> 
    <span>Lorem Ipsum 2</span> 
</div> 
<br /> 
<div class="div3"> 
    <span>Lorem Ipsum 3</span> 
</div>

pokojowe CSS:

.div1, .div2, .div3 { 
    width: 207px; 
    white-space: nowrap; 
}

Wskazówka tylko ustawić rozmiar czcionki span wewnątrz, a nie na zewnętrznym div.

Źródło

2014-09-14 19:22:56 SRachamim

Dzięki putvande za poinformowanie mnie o ogólnej metodzie. Oto ulepszona wersja.

Pozbądź się piekła oddzwaniania.
Naprawiono niektóre błędy mogą powodować zawieszanie się strony.

samo HTML:

<div id="outer" style="width:200px; height:20px; border:1px solid red;"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div> 
</div>

Oto funkcja:

resize_to_fit($('#outer'), $('#outer div')); 

function resize_to_fit(outer, inner) { 
    while(inner.height() > outer.height()) { 
     var fontsize = parseInt(inner.css('font-size')) - 1; 
     inner.css('font-size', fontsize); 
     // some browsers(chrome) the min font return value is 12px 
     if(fontsize <= 1 || parseInt(inner.css('font-size')) >= fontsize+1) 
      break; 
    } 
}

Źródło

2015-11-03 05:44:00 Joe

co jest nie tak z rekursją i jak to jest piekło wywołania zwrotnego? Piekło wywołania zwrotnego, jak już rozumiem, jest zwykle prawie nieskończoną funkcją 'func(). Next(). Then then(). Etc() ..' lub naprawdę ciężka zagnieżdżona anonimowa funkcja przechodząca ... prawda? – Canis

prawdopodobnie oznaczał stos wywołań, a nie oddzwanianie. Nie jest dobrą praktyką powtarzanie się, ponieważ może ona bez końca wypełniać stos wywołań, prawdopodobnie powodując przepełnienie stosu. – uTILLIty

@Joe dlaczego nie użyjesz elementów parentNode, ale wyraźnie oczekujesz, że zostaną przekazane? – uTILLIty

Jeśli przez długość tekstu to znaczy liczbę znaków, jest to artykuł, który wskazuje na fragmencie krótki jquery Change Font Size dynamically based on Character count

http://jsfiddle.net/jfbrLjt2/

$('.text').each(function(){ 
var el= $(this); 
    var textLength = el.html().length; 
    if (textLength > 20) { 
     el.css('font-size', '0.8em'); 
    } 
});

Źródło

2017-10-04 19:58:17

dynamicznie zmieniając rozmiar czcionki na podstawie długości tekstu przy użyciu css i html

Odpowiedz

Powiązane problemy