Le texte de l'échelle jusqu'en ajuster la taille du conteneur

À l'aide de CSS, et en particulier pas de onload javascript, serait-il possible de faire cela:

Vous disposez d'une cellule de 150px de large et de 100px de hauteur.
Il contient un texte, par exemple: $20,00 ou toute variante de que.

Vous le souhaitez pour s'adapter parfaitement à la taille du récipient.

Je serais en mesure de le faire avec javascript, la taille du texte jusqu'à ce qu'un conteneur sans padding/margin atteint la cellule de la largeur et/ou hauteur. Ou de le contenir dans quelque chose qui a un dépassement de capacité à auto et de voir quand il déborde ou quelque chose.

Peut-il être fait avec du pur CSS?

Prendre en compte le fait que la police n'est pas une taille fixe de la police, soit. Utiliser Arial si vous le souhaitez.

  • Je ne pense pas que vous pouvez le faire sans l'aide de jquery, découvrez cette réponse: stackoverflow.com/questions/4408937/...
  • J'avais seconde. Cela ne peut être fait avec du pur CSS.
  • Vos meilleurs résultats seront probablement avec quelques calc() de la magie dans votre taille de police. J'ai fait quelques tests avec ça, mais vraiment, si vous n'avez pas de variables et vous ne pouvez pas déterminer la largeur des caractères particuliers, vous ne pouvez pas le faire avec les CSS. Vous le savez probablement de FitText, mais c'est le moyen le plus facile de le faire avec JS autrement – vous permet d'économiser beaucoup de travail 🙂 dites-nous si vous venez avec quelques intrigants solution, btw.
  • Le "non", la réponse est un peu out-of-date. Presque tous les principaux navigateurs prennent en charge les vh, vw, et vmin fenêtre d'affichage des unités de maintenant, avec l'Opéra étant la principale exception. caniuse.com/viewport-units
  • Deuxième Marque du commentaire et de l'Opéra de passer à webkit rend le soutenir maintenant trop
  • Hmm... eh bien, comment voulez-vous faire avec vw ou vh?
  • En tant que Miss affiché ci-dessous, voir: css-tricks.com/viewport-sized-typography pour une démo.

InformationsquelleAutor MHD | 2012-01-24
  1. 6

    Une chose que j'ai fait qui n'est pas parfait, mais qui peut faire le travail, dans certains cas, est d'utiliser une règle @media pour les tailles d'écran plus petite que X pixels, définissez la taille de police plus petite ou plus grande.

    h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
   h2{
     font-size:19px;
   }
}

    Bien sûr, cela ne fonctionnerait qu'en supposant que les textes de la taille du récipient est basé sur la taille de la fenêtre d'une certaine façon.

    InformationsquelleAutor Tyler
  2. 13

    Check this out: http://css-tricks.com/viewport-sized-typography/

    Malheureusement cela ne fonctionne que dans Chrome 20+ & IE 10+ donc pour l'instant, vous allez avoir à coller avec une solution js....

    InformationsquelleAutor Miss A