Home > Developer > Web Develop
How CSS implements text vertical effects:
Text vertical Although not commonly used, but not without this aspect of the requirements, but the existing CSS property support is not high or compatibility is not good, really did not find the right way to achieve this effect, the following share a JavaScript implementation of the effect, we can learn from it, the effect is very good. The code example is as follows:
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.51texiao.cn/" /> <title>Ant Tribe</title> <styletype= "Text/css">span{float: Right;width:1em;text-align:Center;Word-wrap:Break-word;background:#ccf;margin:0 5px; } </style> <Scripttype= "Text/javascript"> functionShupai (Eid) {varP=document.getElementById (Eid); varStr=P.innerhtml.replace (/<[^>]+>/gi,""); vararr=Str.replace (/(.{ 1,10})/G,"<span>$1</span>"); P.innerhtml=arr;} Window.onload=function() {Shupai ("Test");} </Script> </Head> <Body> <PID= "Test">Although the text vertical row is not commonly used, but does not have the requirement, but the existing CSS property support degree is not high or the compatibility is not good.</P> </Body> </HTML>
The above code is perfect to achieve the desired effect, can be directly applied on it, if the appreciation of interest can be self-analysis of the code.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/513.html
How CSS implements text vertical effects
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
