CSS3で文字を減らす方法

藏色散人
藏色散人オリジナル
2021-01-12 10:32:524171ブラウズ

css3 でテキストを削減する方法: 最初に HTML サンプル ファイルを作成し、次に p タグを定義し、最後に「transform:scale(x)」スタイルを使用してテキストを削減します。

CSS3で文字を減らす方法

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

推奨: css ビデオ チュートリアル

css3 テキストを縮小

transform:scale(x)、全体的なスケーリングについては、全体のスケールには、幅、高さ、背景が含まれます。当然のことですが、この属性はインライン要素には使用できませんので、外側の要素を変更せずに独自のスケーリングを実現するには、属性なしのspanを使用してブロック要素またはインラインブロック要素に変換して設定するのが最善です。

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>

CSS3で文字を減らす方法

以上がCSS3で文字を減らす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。