>웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 텍스트의 세로 배열을 구현하는 방법

CSS를 사용하여 텍스트의 세로 배열을 구현하는 방법

云罗郡主
云罗郡主원래의
2018-11-23 17:25:132951검색

이 글의 내용은 CSS를 사용하여 세로 텍스트 배열을 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS를 사용하여 텍스트의 세로 배열을 구현하는 방법

스타일 시트의 워드 프로세싱 속성에는 쓰기 모드와 텍스트 정렬이라는 두 가지 중요한 속성이 있습니다. 먼저 사용법을 살펴보겠습니다:

1. writing-mode (객체 쓰기 방향 설정)

Syntax: writing-mode: lr-tb, tb-rl

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

예:

CSS 코드는 내용을 클립보드에 복사합니다

div { writing-mode: tb-rl; }

2 text-align(객체의 텍스트 정렬 설정)

구문: text-align: left, right, center, justify

매개변수: left: 왼쪽 정렬 right: 오른쪽 정렬 center: center justify: 양쪽 끝 정렬

예:

CSS 코드는 내용을 클립보드에 복사합니다

div { text-align : center; }

그리고 일반적으로 일반적인 조판 아이디어: 텍스트 개체의 너비를 설정하면 다음 텍스트의 너비와 거리만 정렬할 수 있습니다. 텍스트가 한 줄에 두 문자를 맞출 수 없으면 텍스트가 자동으로 줄 바꿈됩니다.

CSS 코드는 클립보드에 콘텐츠를 복사합니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例 在线演示 www.divcss8.com</title>
<style>
body{text-align:center}
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}
</style>
</head>
<body>
<div class="shuli">我是竖列排版</div>
</body>
</html>

위는 CSS를 사용하여 수직 텍스트 정렬을 구현하는 방법에 대한 전체 소개입니다. CSS3 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.


위 내용은 CSS를 사용하여 텍스트의 세로 배열을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.