简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

How to achieve vertical text effect with CSS

PHP中文网
Release： 2017-06-05 14:33:25
Original
3265 people have browsed it

CSS如何实现文字竖排效果:
文字竖排虽然不常用，但是并不是没有这方面的需求，但是现有的CSS属性支持度都不高或者兼容性不好，确实没有找到合适的方法来实现此效果，下面就分享一个用javascript实现的效果，大家可以借鉴一下，效果非常的好。代码实例如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> 
<meta name="author" content="www.51texiao.cn/" /> 
<title>蚂蚁部落</title> <style type="text/css">
 span{   float:right;   width:1em;   text-align:center;   word-wrap:break-word;   background:#ccf;   margin:0 5px; } </style> <script type="text/javascript">
 function shuPai(eid){   var p = document.getElementById(eid);   var str=p.innerHTML.replace(/<[^>]+>/gi,"");   var arr = str.replace(/(.{1,10})/g,"<span>$1</span>");  
 p.innerHTML = arr; } window.onload=function(){shuPai("test");} </script> </head> <body>  
 <p id="test">文字竖排虽然不常用，但是并不是没有这方面的需求，但是现有的CSS属性支持度都不高或者兼容性不好。
</p> 
</body> 
</html>
Copy after login

以上代码完美的实现了想要的效果，可以直接套用就可以了，如果感谢兴趣可以自行分析一下代码。

Related labels：
CSS，文字竖排
source：php.cn
Previous article：html learning-_html/css_WEB-ITnose Next article：What is the difference between border:0 and border:none_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The list item symbols (<ul> and <ol>) in the root node cannot be displayed and removed in CSS, and the overflow-x: hidden problem cannot be removed. I'm currently working on a web page and I'm having trouble with my list items. The dots an...
From 2024-04-04 16:38:22
0
1
3617
How to add hyperlink functionality using html and css I have some HTML code with some css and I want the button to actually serve a purpose like...
From 2024-04-01 23:34:12
0
2
342
My website displays fine on desktop but not on mobile screen I use HTML/CSS to design my personal website. But the text doesn't scale to the phone. Ple...
From 2024-03-30 15:09:41
0
1
352
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！