How to make horizontal words stand up in css-CSS Tutorial-php.cn

How to make horizontal words stand up in css

藏色散人

Release： 2020-12-17 16:36:05

Original

3344 people have browsed it

How to use css to stand up horizontal words: First create an HTML sample file; then define a div text; and finally set the css style to "{width: 20px;margin: 0 auto;line-height: 24px;}" to stand the text up.

How to make horizontal words stand up in css

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

1. The vertical arrangement of a sentence

As shown in the figure:

How to make horizontal words stand up in css

<!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>  
    <div class="one">我是竖列排版</div>  
    <div class="two">I AM ENGLISH</div>  
</body>  
</html>

Copy after login

2. Multiple sentences arranged vertically (such as ancient poems)

As shown:

How to make horizontal words stand up in css

<!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>  
    <div class="one">I AM ENGLISH</div>
</body>  
</html>

Copy after login

3. The fonts are horizontally aligned, The overall vertical layout

is shown in the picture:

How to make horizontal words stand up in css

<!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>
<div class="one">欲话毗陵君反袂</div>
<div class="one">ENGLISH</div>
</body>
</html>

Copy after login

The above is the detailed content of How to make horizontal words stand up in css. For more information, please follow other related articles on the PHP Chinese website!