So reduzieren Sie Text in CSS3

So reduzieren Sie Text in CSS3: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann ein p-Tag. Verwenden Sie schließlich den Stil „transform:scale(x)“, um den Text zu reduzieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Empfohlen: CSS-Video-Tutorial

CSS3-Text verkleinern

transform:scale(x), für die Gesamtskalierung umfasst die Gesamtskalierung Breite, Höhe und Hintergrund. Natürlich kann dieses Attribut nicht für Inline-Elemente verwendet werden. Es ist am besten, span ohne Attribute zu verwenden, um es zum Festlegen in ein Blockelement oder ein Inline-Blockelement umzuwandeln, um eine eigene Skalierung zu erreichen und gleichzeitig sicherzustellen, dass die äußeren Elemente unverändert bleiben.

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>

Das obige ist der detaillierte Inhalt vonSo reduzieren Sie Text in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!