CSS 텍스트를 세로로 표시하는 방법은 무엇입니까? CSS 텍스트를 세로로 표시하는 방법-CSS 튜토리얼-php.cn

CSS 텍스트를 세로로 표시하는 방법은 무엇입니까? CSS 텍스트를 세로로 표시하는 방법

不言

풀어 주다： 2018-09-18 14:07:48

원래의

25068명이 탐색했습니다.

특별한 요구 사항으로 인해 웹 페이지의 텍스트가 가로로 표시되지 않는 경우가 있습니다. 그렇다면 텍스트를 세로로 표시하는 방법이 필요합니다. 다음 글에서는 CSS에서 텍스트를 세로로 표시하는 방법을 소개하겠습니다.

CSS 텍스트를 세로로 표시하는 방법 1:

쓰기 모드 속성 사용

구문: 쓰기 모드:lr-tb 또는 쓰기 모드:tb-rl

매개변수: lr-tb: 왼쪽에서 오른쪽 , 위에서 아래로 tb-rl: 위에서 아래로, 오른쪽에서 왼쪽으로.

<!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>  
    <div class="one">十轮霜影转庭梧，此夕羁人独向隅。
未必素娥无怅恨，玉蟾清冷桂花孤。 </div>  
</body>  
</html>

로그인 후 복사

CSS 텍스트의 세로 표시 효과는 다음과 같습니다.

CSS 텍스트를 세로로 표시하는 방법은 무엇입니까? CSS 텍스트를 세로로 표시하는 방법

이 방법은 호환성이 좋지 않고 IE 브라우저에서만 지원되므로 여기서는 소개하지 않겠습니다. 더 알고 싶으시면

css 온라인 매뉴얼을 참고하세요.

CSS 텍스트를 세로로 표시하는 방법 2:

다음 텍스트만 정렬할 수 있도록 텍스트 개체의 너비를 설정합니다. 텍스트가 한 줄에 두 글자를 채울 수 없으면 텍스트가 자동으로 줄바꿈됩니다. 수직 조판이 필요합니다.

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    width: 52px;  
    margin: 0 auto;  
    line-height: 56px;  
    font-size: 50px;
} 
</style>  
<body>  
    <div class="one">中秋月</div>  
</body>  
</html>

로그인 후 복사

참고: word-wrap: break-word;/*줄을 자동으로 줄 바꿈하려면 이 문장을 영어로 추가해야 합니다*/

참고: 텍스트 DIV의 너비를 더 작게 설정하여 행은 다음 텍스트만 정렬할 수 있으므로 텍스트가 자동으로 줄 바꿈되어 세로 열 레이아웃이 구현됩니다.

css텍스트 세로 표시 효과는 다음과 같습니다:

CSS 텍스트를 세로로 표시하는 방법은 무엇입니까? CSS 텍스트를 세로로 표시하는 방법

Css 텍스트 세로 표시 방법 3:

이 방법을 추천합니다. 이 방법은 호환성이 좋고 코드도 다음과 같습니다. 간단합니다

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1 { width: 50px; font-size: 50px;letter-spacing: 20px; } 
</style> 
</head> 
<body> 
<h1>中秋月</h1>
</body> 
</html>

로그인 후 복사

CSS 텍스트의 세로 표시 효과는 다음과 같습니다.

CSS 텍스트를 세로로 표시하는 방법은 무엇입니까? CSS 텍스트를 세로로 표시하는 방법

CSS 텍스트 세로 표시 방법 4:

br 줄 바꿈을 사용하여 텍스트를 세로로 표시합니다.

사용 html br 줄 바꿈 태그는 텍스트 줄 바꿈을 구현하고 각 텍스트 뒤에 줄 바꿈 br 태그를 추가하여 세로로 입력할 수 있도록 합니다.

    <!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{text-align:center; line-height:60px;font-size:30px} 
    /* CSS注释说明：设置css文字居中，css行高为22px间隔 */ 
    </style> 
    </head> 
    <body> 
    p<br>h<br>p<br>中<br>文<br>网
    </body> 
    </html>

로그인 후 복사

CSS 텍스트의 세로 표시 효과는 다음과 같습니다.

CSS 텍스트를 세로로 표시하는 방법은 무엇입니까? CSS 텍스트를 세로로 표시하는 방법