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? Here is my translation from Nettuts+ 's article, I hope these methods can bring you some hints.
Method a:<br/> Label
One possible approach, but not recommended, is to add a <br/> tag after each letter to achieve vertical text:
The following are the referenced contents: N <br/>e <br/>t <br/>t <br/>u <br/>t <br/>s |
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 the CSS.
The following are the referenced contents: <! DOCTYPE html> <style> <span> N </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.
The following are the referenced contents:
<style> <script> |
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:
It can ruin your layout if JavaScript is disabled.
Ideally, if possible, we should use CSS to accomplish this task.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
