简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

CSS如何实现文字竖排效果

PHP中文网
Libérer： 2017-06-05 14:33:25
original
3266 Les gens l'ont consulté

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>
Copier après la connexion

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

Étiquettes associées：
CSS，文字竖排
source：php.cn
Article précédent：html学习-_html/css_WEB-ITnose Article suivant：border:0和border:none的区别是什么_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Les symboles d'élément de liste (<ul> et <ol>) dans le nœud racine ne peuvent pas être affichés et supprimés en CSS, et le problème overflow-x: caché ne peut pas être supprimé. Je travaille actuellement sur une page Web et j'ai des problèmes avec les éléments de ma l...
Depuis 2024-04-04 16:38:22
0
1
3617
Comment ajouter une fonctionnalité de lien hypertexte en utilisant HTML et CSS J'ai du code HTML avec du CSS et je veux que le bouton serve réellement à un objectif comm...
Depuis 2024-04-01 23:34:12
0
2
342
Mon site Web s'affiche correctement sur un ordinateur de bureau mais pas sur un écran mobile J'utilise HTML/CSS pour concevoir mon site Web personnel. Mais le texte ne s'adapte pas au...
Depuis 2024-03-30 15:09:41
0
1
352
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！