How to make text display vertically in html? Summarize various methods to achieve vertical text style

Text Style is a collection of text settings that can be saved with graphics. These settings can include font settings and special effects. Text styles will be displayed differently in different software environments. Let’s share how to make text vertical in HTML? Summarize the various methods to achieve vertical text style

Must master CSS text styles

Font family

serif font serif

sans serif font sans-serif
//generally for For compatibility, one of them must be added to avoid fonts that are not set in the current system

1. Vertical text setting method

1. js+css to achieve a three-dimensional button-type text vertical menu effect

This is a relatively good vertical menu. Menus with three-dimensional effects. Don’t think that those menus with three-dimensional effects are buttons. In fact, they are buttons decorated with JavaScript code. When the mouse is placed on it, there will be an obvious three-dimensional text effect. They are arranged vertically, and Can be modified to be horizontal.

The screenshot of the running effect is as follows:

2. 4 ways to arrange CSS text vertically

Sometimes, we need to arrange the text in a certain area of ​​the web page vertically. Of course, everyone is used to it horizontally. For vertical arrangement, I can’t find the idea for a while, haha , in fact, it is as simple as horizontal arrangement. Here are 4 methods to achieve vertical arrangement of CSS text.

The first method: Place the characters that need to be displayed vertically in span, and set the display attribute of span to block in CSS. However, this method is not recommended because it is a bit troublesome.

3. How to achieve vertical text arrangement with CSS

Although vertical text arrangement is not commonly used, it is not impossible. There is a demand in this area, but the existing CSS properties are not very supportive or have poor compatibility. There is indeed no suitable method to achieve this effect. Here is an effect achieved using javascript. You can learn from it. The effect is very good. Good. The code example is as follows:

4. How to arrange English vertically in table?

Those are from top to bottom, which is similar to clockwise; what I want are English words, which are read from bottom to top, which is equivalent to counterclockwise.

5. JS implements vertical navigation code that imitates FLASH effect

This is a navigation menu with Flash effect implemented by JS+CSS, arranged vertically. Good compatibility, written by friends from JavaScript Miaowei Classroom, welcome to test.

6. JS code to implement silver-gray vertical folding menu with 3D stereoscopic effect

This is a super cool silver-gray vertical multi-level folding menu that can be used on the left side of the web page. You can add a background to the menu yourself. There is a code reserved in the CSS. This is a relatively standard and classic one. The menu in the background management mode has a Div+Css structure, which conforms to standards and is easy to modify, which is quite good.

二. Related questions and answers:

1. python - Tkinter Label How to change the text style in Label, for example, add Strikethrough

2. javascript - Are there any JS libraries that display text effects on images (non-synthetic)?

【Recommended related articles】:

1. A brief analysis of several ways to hide page text in CSS Summary

2. Introduction to how CSS beautifies the selected text

3. Detailed explanation of the usage of the writing-mode text layout attribute of css

4. h5 and css3 production with prompts Text input box

The above is the detailed content of How to make text display vertically in html? Summarize various methods to achieve vertical text style. For more information, please follow other related articles on the PHP Chinese website!