How to reduce text in css3

How to reduce text in css3: First create an HTML sample file; then define a p tag; finally use the "transform:scale(x)" style to reduce the text.

The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Recommended: css video tutorial

css3 shrink text

transform:scale(x), for overall scaling , the overall scale includes width, height, and background. Naturally, this attribute cannot be used for inline elements. It is best to use span without attributes to convert it into a block element or an inline block element for setting, so as to achieve its own scaling while ensuring that the outer elements remain unchanged.

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>

The above is the detailed content of How to reduce text in css3. For more information, please follow other related articles on the PHP Chinese website!