CSS 텍스트를 세로로 표시하는 방법은 무엇입니까? CSS 텍스트를 세로로 표시하는 방법
- 不言원래의
- 2018-09-18 14:07:4825113검색
특별한 요구 사항으로 인해 웹 페이지의 텍스트가 가로로 표시되지 않는 경우가 있습니다. 그렇다면 텍스트를 세로로 표시하는 방법이 필요합니다. 다음 글에서는 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 텍스트를 세로로 표시하는 방법 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;/*줄을 자동으로 줄 바꿈하려면 이 문장을 영어로 추가해야 합니다*/ 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 텍스트 세로 표시 방법 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 텍스트를 세로로 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.