Home >Web Front-end >CSS Tutorial >How to make text display in rows with css
How to make text display in rows with css
- coldplay.xixiOriginal
- 2021-03-11 16:35:156013browse
Css method to display text in rows: 1. Use the [writing-mode] attribute, the syntax is [writing-mode:lr-tb or writing-mode:tb-rl]; 2. For text objects The width setting can only arrange the width distance of the next text.
The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.
Css method to display text in rows:
Method 1: Use the writing-mode attribute
Syntax:
writing-mode:lr-tb或writing-mode:tb-rl
Parameters: lr-tb: from left to right, from top to bottom; tb-rl: from top to bottom, from right to left.
<!DOCTYPEhtml>
<html>
<head>
<title>test</title>
<metacharset="UTF-8">
</head>
<style>
.one{
margin:0auto;
height:140px;
writing-mode:vertical-lr;/*从左向右从右向左是writing-mode:vertical-rl;*/
writing-mode:tb-lr;/*IE浏览器的从左向右从右向左是writing-mode:tb-rl；*/
}
</style>
<body>
<divclass="one">十轮霜影转庭梧，此夕羁人独向隅。
未必素娥无怅恨，玉蟾清冷桂花孤。</div>
</body>
</html>This method has poor compatibility and is only supported in the IE browser, so it is not recommended. I won’t introduce it here. If you want to know more, you can refer to the CSS online manual.
Method 2 for vertical display of css text:
Set the width of the text object so that only the next text can be arranged, so that the text cannot fit two characters in one line Making the text wrap automatically creates a need for vertical typesetting.
<!DOCTYPEhtml>
<html>
<head>
<title>test</title>
<metacharset="UTF-8">
</head>
<style>
.one{
width:52px;
margin:0auto;
line-height:56px;
font-size:50px;
}
</style>
<body>
<divclass="one">中秋月</div>
</body>
</html>Note: word-wrap:break-word;/*You need to add this sentence in English to automatically wrap the line*/
Recommended related tutorials: CSS video Tutorial
The above is the detailed content of How to make text display in rows with css. For more information, please follow other related articles on the PHP Chinese website!