How to display css text vertically? How to display css text vertically-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to display css text vertically? How to display css text vertically

不言

Sep 18, 2018 pm 02:07 PM

cssVertical text

Sometimes the text in the webpage cannot be displayed horizontally due to special requirements. At this time, what is needed is to display the text vertically. So, How to display the text vertically in the webpage? The following article will introduce css method to achieve vertical text display.

Method 1 to display CSS text vertically:

Use the writing-mode attribute

Syntax: writing-mode:lr-tb or 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.

<!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>  
</body>  
</html>

The vertical display effect of css text is as follows:

How to display css text vertically? How to display css text vertically

This method has poor compatibility and is only available in IE browser It can only be supported, so it is not recommended to use it. I won’t introduce it here. If you want to know more, you can refer to 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.

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    width: 52px;  
    margin: 0 auto;  
    line-height: 56px;  
    font-size: 50px;
} 
</style>  
<body>  
    <div class="one">中秋月</div>  
</body>  
</html>

Note: word-wrap: break-word;/*You need to add this sentence in English to automatically wrap the line*/

Instructions: Set a smaller width for the text DIV so that only one text can be arranged in a row, so that the text will automatically wrap to achieve vertical column layout.

cssThe effect of vertical text display is as follows:

How to display css text vertically? How to display css text vertically

css vertical text display Method three:

It is recommended to use this method. I think this method has good compatibility and the code is simple

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1 { width: 50px; font-size: 50px;letter-spacing: 20px; } 
</style> 
</head> 
<body> 
<h1 id="中秋月">中秋月</h1>
</body> 
</html>

css The effect of vertical text display is as follows:

How to display css text vertically? How to display css text vertically

Css text vertical display method four:

Use br to wrap The text is displayed vertically and vertically

uses the html br line break tag to realize text line wrapping, and adds a line break br tag after each text to allow it to be arranged in vertical columns.

    <!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{text-align:center; line-height:60px;font-size:30px} 
    /* CSS注释说明：设置css文字居中，css行高为22px间隔 */ 
    </style> 
    </head> 
    <body> 
    p<br>h<br>p<br>中<br>文<br>网
    </body> 
    </html>

The effect of vertical display of css text is as follows:

How to display css text vertically? How to display css text vertically

This article has been introduced here. In fact, there are many more The method can realize the vertical display of text, which will not be introduced one by one here. For more exciting content, you can pay attention to php Chinese website.

The above is the detailed content of How to display css text vertically? How to display css text vertically. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties