CSS에서 세로 텍스트를 설정하는 방법-프런트엔드 Q&A-php.cn

CSS에서 세로 텍스트를 설정하는 방법

藏色散人

풀어 주다： 2023-01-06 11:15:40

원래의

13167명이 탐색했습니다.

CSS에서 세로 텍스트를 설정하는 방법: 1. "word-wrap: break-word;"와 같은 속성을 통해 단일 세로 텍스트를 구현합니다. 2. "writing-mode: tb"와 같은 속성을 통해 여러 줄의 세로 텍스트를 구현합니다. -lr" 텍스트; 3. 전체 수직 레이아웃을 얻으려면 "rotate(90deg);"를 사용합니다.

CSS에서 세로 텍스트를 설정하는 방법

이 문서의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS로 세로 텍스트 레이아웃을 구현하는 몇 가지 간단한 방법

다음은 CSS를 사용하여 세로 텍스트를 구현하는 여러 가지 방법을 소개합니다. 레이아웃:

1 .문장의 세로 배열

은 그림과 같습니다.

<!DOCTYPE html>  <html>  <head>  
    <title>test</title>  
    <meta charset="UTF-8">  </head>  <style>  .one {  
    width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
    font-size: 20px;}.two {  
    width: 15px;  
    margin: 0 auto;  
    line-height: 24px;  
    font-size: 20px;  
    word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/  }  </style>  <body>  
    <p class="one">我是竖列排版</p>  
    <p class="two">I AM ENGLISH</p>  </body>  </html>

로그인 후 복사

2 여러 문장의 세로 배열(고대 시 등)

은 다음과 같습니다. 그림:

<!DOCTYPE html>  <html>  <head>  
    <title>test</title>  
    <meta charset="UTF-8">  </head>  <style>  .one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  }  </style>  <body>  
    <p class="one">欲话毗陵君反袂，欲言夏口我沾衣。谁知临老相逢日，悲叹声多语笑稀。</p>  
    <p class="one">I AM ENGLISH</p></body>  </html>

로그인 후 복사

3 글꼴은 가로이고 전체는 세로입니다. 그림과 같이

조판하려면:

<!DOCTYPE html><html><head>
    <title>test</title>
    <meta charset="UTF-8"></head><style>.one {
    margin: 150px auto;
    width: 200px;
    font-size: 20px; 
    line-height: 24px;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);     /* IE 9 */
    -moz-transform:rotate(90deg);     /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg);     /* Opera */}</style><body>
    <p class="one">欲话毗陵君反袂</p>
    <p class="one">ENGLISH</p></body></html>

로그인 후 복사

권장 학습: "css 비디오 튜토리얼"

위 내용은 CSS에서 세로 텍스트를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!