var els     = document.querySelectorAll(".divtext"),
refWidth    = els[0].clientWidth,
refFontSize = parseFloat(window.getComputedStyle(els[0],null)
                               .getPropertyValue("font-size"));
els.forEach((el,i) => el.style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px")

#container {
  display: inline-block;
  background-color: black;
  padding: 0.6vw 1.2vw;
}
.divtext {
  display: table;
  color: white;
  font-family: impact;
  font-size: 4.5vw;
}

<div id="container">
  <div class="divtext">THIS IS JUST AN</div>
  <div class="divtext">EXAMPLE</div>
  <div class="divtext">TO SHOW YOU WHAT</div>
  <div class="divtext">YOU WANT</div>
</div>

13

Deze webcomponent wijzigt de lettertype-formaat, zodat de binnenste tekstbreedte overeenkomt met de containerbreedte . Controleer de Demo .

U kunt het als volgt gebruiken:

<full-width-text>Lorem Ipsum</full-width-text>

14

Binnen uw CSS, probeer dit bij de onderkant toe te voegen aan de breedte van 320 pixels voor waar uw ontwerp begint te breken:

   @media only screen and (max-width: 320px) {
        body { font-size: 1em; }
    }

Geef vervolgens het lettertype-formaat in “PX” of “EM” zoals u wenst.

15

Misschien ben je op zoek naar zoiets als deze:

http://jsfiddle.net/sijav/dgsc9/4/

http://fiddle.jshell.net/sijav/dgsc9/4/show/

Ik heb FlowType , en het werkt goed (maar het is JavaScript en geen pure CSS-oplossing) :

$('body').flowtype({
    minFont: 10,
    maxFont: 40,
    minimum: 500,
    maximum: 1200,
    fontRatio: 70
});

16

Ik heb een eenvoudige schaalfunctie voorbereid met behulp van CSS-transformatie in plaats van lettertype-formaat. U kunt het in elke container gebruiken, u hoeft geen media-query’s, enz. 🙂

Blog Post:
Volledige breedte CSS & AMP; JS schaalbare koptekst

De code:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

Demo werken:
https://codepen.io/maciejkorsan/pen/bwlryj

17

Probeer http://simplefocus.com/flowtype/ . Dit is wat ik gebruik voor mijn sites, en het heeft perfect gewerkt.

18

Mijn probleem was vergelijkbaar, maar gerelateerd aan schaaltekst binnen een kop. Ik heb geprobeerd lettertype, maar ik moest de compressor uitwisselen om resultaten te krijgen, omdat het een enigszins ander probleem oplost, zoals tekststroom was.

Dus schreef ik mijn eigen kleine plug-in die de lettergrootte heeft verlaagd om de container te passen, ervan uitgaande dat je overflow: hiddenen white-space: nowrapDus Het verlaging van het lettertype tot het minimum staat niet toe dat de volledige kop toont, het snijdt gewoon af wat het kan laten zien.

(function($) {
  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);
    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }
    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });
  };
})(jQuery);

Antwoord 19

Probeer de plug-in fitTextte gebruiken, want Viewport-formaten zijn niet de oplossing voor dit probleem.

Voeg gewoon de bibliotheek toe:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

En verander de lettergrootte voor correct door de tekstcoëfficiënt in te stellen:

$("#text_div").fitText(0.8);

U kunt maximum- en minimumwaarden voor tekst instellen:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

Antwoord 20

Altijd uw elementmet dit kenmerk:

JavaScript: element.style.fontSize = "100%";

of

CSS: style = "font-size: 100%;"

Als je op volledig scherm gaat, zou je al een variabele schaalmoeten hebben berekend (schaal > 1 of schaal = 1). Dan, op volledig scherm:

document.body.style.fontSize = (scale * 100) + "%";

Het werkt prima met weinig code.

Antwoord 21

Kijk eens naar mijn code. Het maakt de font size smallerzodat het fitwat er ook is.

Maar ik denk dat dit niet leidt tot een goede gebruikerservaring

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;
items.each(function(){
    // Displaying a value depends sometimes on your case. You may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width.
    $(this).css({"whiteSpace": "nowrap", "display": "inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()" + $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

Antwoord 22

Dit werkte voor mij:

Ik probeer de lettergrootte te schatten op basis van een breedte/hoogte die ik heb gekregen bij het instellen van `lettergrootte: 10px`. Kortom, het idee is “als ik 20 pixels breed en 11 pixels hoog heb met ‘lettergrootte: 10px’, wat zou dan de maximale lettergrootte zijn om een container van 50 pixels breed en 30 pixels te berekenen? hoogte?”

Het antwoord is een systeem met dubbele verhoudingen:

{ 20:10=50:X, 11:10=30:Y } = { X= (10*50)/20, Y= (10*30)/11 }

Nu is X een lettergrootte die overeenkomt met de breedte en Y is een lettergrootte die overeenkomt met de hoogte; neem de kleinste waarde

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;
    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)
        parent_h = 0;
    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)
        parent_w = 0;
    el.style.fontSize = fontSize + "px";
    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)
        el_h = 0;
    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)
        el_w = 0;
    // 0.5 is the error on the measure that JavaScript does
    // if the real measure had been 12.49 px => JavaScript would have said 12px
    // so we think about the worst case when could have, we add 0.5 to 
    // compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

NB: Het argument van de functie moet een spanelement of een element zijn dat kleiner is dan de ouder, anders als kinderen en ouder beide dezelfde breedte / hoogte-functie mislukken.

23

Als een JavaScript-fallback (of uw enige oplossing), kunt u mijn jQuery scalem plugin gebruiken , waarmee u kunt schalen ten opzichte van het ouderelement (container) door de referencete passeren.

24

In het geval dat het nuttig is voor iedereen, waren de meeste oplossingen in deze thread de tekst in meerdere regels, formulier e.

Maar toen vond ik dit, en het werkte:

https://github.com/chunksnbits/jQuery-quickFit

Voorbeeld Gebruik:

$('.someText').quickfit({max:50,tolerance:.4})

25

Voor dynamische tekst is deze plug-in vrij handig:

http://freqdec.github.io/slabtext/

Voeg gewoon CSS toe:

.slabtexted .slabtext
{
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
}
.slabtextinactive .slabtext
{
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
}
.slabtextdone .slabtext
{
    display: block;
}

en het script:

$('#mydiv').slabText();

26

HTML

<div style="height:100px; width:200px;">
  <div id='qwe'>
    test
  </div>
</div>

JavaScript-code voor het maximaliseren van het lettertype-formaat:

var fontSize, maxHeight, maxWidth, textElement, parentElement;
textElement = document.getElementById('qwe');
parentElement = textElement.parentElement;    
maxHeight = parentElement.clientHeight;
maxWidth = parentElement.clientWidth;
fontSize = maxHeight;
var minFS = 3, maxFS = fontSize;
while (fontSize != minFS) {
  textElement.style.fontSize = `${fontSize}px`;
  if (textElement.offsetHeight < maxHeight && textElement.offsetWidth <= maxWidth) {
    minFS = fontSize;
  } else{
    maxFS = fontSize;
  }
  fontSize = Math.floor((minFS + maxFS)/2);
}
textElement.style.fontSize = `${minFS}px`;

Antwoord 27

Ik zie geen antwoord met betrekking tot de CSS flex-eigenschap, maar het kan ook erg handig zijn.

Antwoord 28

Om de lettergrootte in de container te laten passen, in plaats van in het venster, raadpleegt u de functie resizeFont()die ik in deze vraag heb gedeeld (een combinatie van andere antwoorden, waarvan de meeste al hier gelinkt). Het wordt geactiveerd met behulp van window.addEventListener('resize', resizeFont);.

Vanilla JavaScript: formaat van font-awesome aanpassen aan container

JavaScript:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

Je zou misschien vw/vh als fallback kunnen gebruiken, zodat je dynamisch emof remeenheden toewijst met behulp van JavaScript, om ervoor te zorgen dat de lettertypen naar het venster schalen als JavaScript is uitgeschakeld.

Pas de klasse .resizetoe op alle elementen die tekst bevatten die u wilt schalen.

Activeer de functie voordat u de gebeurtenislistener voor het wijzigen van de grootte van het venster toevoegt. Vervolgens wordt elke tekst die niet in de container past, verkleind wanneer de pagina wordt geladen en ook wanneer het formaat wordt gewijzigd.

OPMERKING: De standaard font-sizemoet zijn ingesteld op em,remof %om goede resultaten.