CSS에서 세로 텍스트를 설정하는 방법
- 藏色散人원래의
- 2021-05-27 11:03:1213141검색
CSS에서 세로 텍스트를 설정하는 방법: 1. "word-wrap: break-word;"와 같은 속성을 통해 단일 세로 텍스트를 구현합니다. 2. "writing-mode: tb"와 같은 속성을 통해 여러 줄의 세로 텍스트를 구현합니다. -lr" 텍스트; 3. 전체 수직 레이아웃을 얻으려면 "rotate(90deg);"를 사용합니다.
이 문서의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 게시물이 깨졌을 경우 대처 방법다음 기사：HTML 게시물이 깨졌을 경우 대처 방법