When making a Web page we often need to create some vertical text, which may be a very simple thing for you, but have you ever thought of using CSS to have n ways to create vertical text? Hopefully these methods will bring you some hints.
Method One: <br/> Label
One possible approach, but not recommended, is to add a <br/> tag after each letter to achieve vertical text:
1
2
3 |
N <br/>e <br/>t <br/>t <br/>u <br/>t <br/>s
|
Click to view Demo
Never use this method, it is lame and sloppy.
Method Two: Static package
In this way, we wrap each letter in a span and then set its display property to block in CSS
1
2
3
4
5
6
7
8
9
Ten
One
"
"
"
"
"
"
"
" |
<! DOCTYPE html>
<meta charset=utf-8 />
<title> Vertical
Text</title>
<style>
H1 span {display:block;}
</style>
<body>
<span> n </span>
<span> e </span>
<span> t </span>
<span> t </span>
<span> u </span>
<span> t </span>
<span> s </span>
</body>
|
The problem with this approach is that, in addition to the dreaded label, it requires you to manually enclose each letter in span. If these words are generated dynamically by the CMS, then don't use this method.
Method Three: Using JavaScript
My initial idea was to add a span tag dynamically with JavaScript, so we avoided the problem with method two.
1
2
3
4
5
6
7
8
9
Ten
One
|
<meta charset=utf-8 />
<title> Vertical
Text</title>
<style>
H1 span {display:block;}
</style>
<body>
<script>
var h1 = document.getElementsByTagName (' h1 ') [0];
h1.innerhtml = ' <span> '
+ h1.innerHTML.split ('). Join (' </span><span> ')
+ ' < /SPAN> ';
</script>
</body>
|
This method is definitely an improvement. In the above method, we split one line of text (NETTUTS) into an array and enclose each letter in a span label. Although we can filter this array with a for statement or $.MAP, a better and faster way is to manually insert and enclose text at the same time. Although this approach is better than method two, this method is still not recommended:
Destroys your layout when JavaScript is disabled
Ideally, if possible, we should use CSS to accomplish this task.
Method Four: Specify a width for the container
If possible, let's stay away from JavaScript. What if we assign a width to the container element and force the text to wrap? That's OK.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<! DOCTYPE html>
<meta charset=utf-8/>
<title>vertical
Text</title>
<style>
H1 {
width:50px;
font-size:50px;
Word-wrap:break-word;
}
</style>
<body>
</body>
|
In this method, we define a very narrow width for H1, then the width of the text is equal to the width of the perimeter, and the last set Word-wrap equals Break-word so that we can force each letter to be on one line alone. It should be noted, however, that Break-word is a CSS3 property and not all browsers are compatible. If the old browser is excluded, the problem seems to be solved ... But and totally! The above demo does work, but it's dangerous to play with pixel values, so you can look at the consequences of converting uppercase letters to lowercase letters (see below IE):
So, in this way, be especially careful when you give H1 a specific pixel width. This method is also not recommended!
Method V: Using letter-spacing
As a precaution, and extend method Four, why don't we apply a considerable amount of letter-spacing to solve this problem?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<! DOCTYPE html>
<meta charset=utf-8/>
<title>vertical
Text</title>
<style>
H1 {
width:50px;
font-size:50px;
Word-wrap:break-word;
letter-spacing:20px; /* Set Large letter-spacing as precaution * *
}
</style>
<body>
</body>
|
This seems to solve the problem, but here we are using some of the CSS3 properties.
Method VI: Using EMS
In addition, there is a workaround within one line. I don't know if you remember, when you assign Overflow:hidden to the parent element, the parent element expands to include the float? This approach is similar to this, and the key is to use EM and add spaces between each letter.
This article links http://www.cxybl.com/html/wyzz/CSS/20130708/38978.html
