Comment réduire le texte en CSS3

Comment réduire le texte en CSS3 : créez d'abord un exemple de fichier HTML ; puis définissez une balise p ; enfin utilisez le style "transform:scale(x)" pour réduire le texte.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Recommandé : tutoriel vidéo CSS

texte réduit CSS3

transform:scale(x), pour une mise à l'échelle globale, le l'échelle globale comprend la largeur, la hauteur et l'arrière-plan. Naturellement, cet attribut ne peut pas être utilisé pour les éléments en ligne. Il est préférable d'utiliser span sans attributs pour le convertir en élément de bloc ou en élément de bloc en ligne pour le réglage, afin d'obtenir sa propre mise à l'échelle tout en garantissant que les éléments externes restent inchangés.

CSS :

@media screen and (min-width:320px){font-size: 12px;}
@media screen and (min-width:360px){font-size: 14px;}
@media screen and (min-width:420px){font-size: 16px;}
@media screen and (min-width:480px){font-size: 20px;}
@media screen and (min-width:520px){font-size: 24px;}
@media screen and (min-width:640px){font-size: 28px;}
@media screen and (min-width:750px){font-size: 32px;}
.font1{font-size: 1rem;}.displayIB{display:inline-block;}.scaleFont{transform: scale(0.58);}

HTML :

<p class="font1">测试<span class="displayIB scaleFont">888</span>测试</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!