简体中文(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
3212 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
Comment faire flotter uniquement le deuxième div vers la droite dans un conteneur et envelopper le premier div s'il est trop long J'ai des lignes contenant du texte et des données. La zone de texte doit être alignée à ga...
Depuis 2023-09-15 12:28:31
0
1
331
Pourquoi lors de l'alignement vertical d'un élément de bouton dans un div, l'élément a plus d'espace vertical que celui défini par les marges CSS ? J'ai une page de travail en cours sur ce site et je pensais que la partie la plus difficil...
Depuis 2023-09-14 18:49:41
0
2
252
Comment combler l'écart entre l'image et la barre de progression sur un grand écran à l'aide du système Bootstrap Grid ? Laissez-moi d'abord vous montrer l'idée de​​cette image : Image (1) Sur cette image, nous ...
Depuis 2023-09-14 10:56:03
0
1
335
Impossible d'ajouter des styles de police au fichier function.php du thème WordPress Je crée donc un thème personnalisé pour WordPress et j'essaie de charger les styles du sit...
Depuis 2023-09-10 22:09:17
0
1
291
HTML : Comment passer à la page suivante par ordre croissant ? J'ai des fichiers HTML avec des noms numériques dans un dossier appelé Projet comme celui-...
Depuis 2023-09-10 21:41:36
0
1
243
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！