Home > Article > Web Front-end > How to set vertical text in css
How to set vertical text in css
- 藏色散人Original
- 2021-05-27 11:03:1213136browse
How to set vertical text in css: 1. Realize a single vertical text through attributes such as "word-wrap: break-word;"; 2. Realize through attributes such as "writing-mode: tb-lr" Multi-line vertical text; 3. Use "rotate(90deg);" to achieve overall vertical layout.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer
Several simple ways to achieve vertical text layout with CSS
The following introduces several methods of using Css to achieve vertical text layout:
1. The vertical arrangement of a sentence
is shown in the figure:
<!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. Multiple sentences arranged vertically (such as ancient poems)
As shown:
<!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 .The fonts are horizontal and the overall layout is vertical
as shown in the picture:
##
<!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> Recommended study: "css video tutorial"
The above is the detailed content of How to set vertical text in css. For more information, please follow other related articles on the PHP Chinese website!