Vue (html) realizes the superscript and subscript of the square, cubic and fourth power

Vue (html) implements square, power, and commonly used superscripts and subscripts (can be copied and pasted directly, without sup and sub tags)

First of all, the content of this blog is for personal use, not for commercial use

Today’s business needs to display units with cubic superscripts. Most of the searched html implementations use sup and sub tags. After many tests, this kind of tags cannot be used in Vue, so I simply found one that can be directly copied and pasted. 0-9 upper and lower corner marks, thank you for taking it away

The wrong code is as follows
<el-table-column label="水(m<sup>3<sup>/d)" align="center">

We use element UI in our business. This method cannot solve my problem. It may be that the method used is wrong.
The effect is shown in the figure below

vue error example

The following items that can be entered in this article can also be entered in the Baidu search input box, and can be pasted directly.

m² m³ m⁴ m⁵ mⁿ
m¹²³⁴⁵⁶⁷⁸⁹
m⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹
m. ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉
m⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ
m⁰¹²³⁴⁵⁶⁷⁸⁹
m-₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉
m⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ
M- ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹
M₀₁₂₃₄₅₆₇₈₉.₀₁₂₃₄₅₆₇₈₉₀₁₂₃₄₅₆₇₈₉-+.
M₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌
M⁹⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼ⁿ
M₀₁₂₃₄₅₆₇₈₉₊₋

The code of vue is as follows

<el-table-column label="水(m³/d)" align="center">

This method is relatively simple to implement, directly copy and paste, simple and rude, cv party welfare. The display effect is shown in the figure below
Display of results
Display of results

It can also be realized by code in the code. The following picture is an example picture edited in the code. You can click the link below to jump directly

Click here to jump directly
insert image description here

Don't forget to like and support if you take it away

Guess you like

Origin blog.csdn.net/qq_41648113/article/details/109141530