CSS3에서 텍스트를 줄이는 방법

css3에서 텍스트를 줄이는 방법: 먼저 HTML 샘플 파일을 만든 다음 p 태그를 정의하고 마지막으로 "transform:scale(x)" 스타일을 사용하여 텍스트를 줄입니다.

이 튜토리얼의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

추천: css 비디오 튜토리얼

css3 텍스트 축소

transform:scale(x), 전체 크기 조정의 경우 전체 크기 조정에는 너비, 높이 및 배경이 포함됩니다. 당연히 이 속성은 인라인 요소에 사용할 수 없습니다. 속성 없이 범위를 사용하여 설정을 위해 블록 요소 또는 인라인 블록 요소로 변환하여 외부 요소가 변경되지 않도록 하면서 자체 크기 조정을 달성하는 것이 가장 좋습니다.

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에서 텍스트를 줄이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!