Orientation verticale du texte
J'ai essayé de taper du texte dans une direction verticale, comme nous pouvons le faire dans les tableaux ms-Word, mais jusqu'à présent, je n'ai pu faire que THIS ... ce qui ne me satisfait pas car c'est une boîte pivotée ... N'y a-t-il pas moyen d'avoir un texte avec une direction verticale réelle?
Je règle uniquement la rotation à 305 degrés dans la démo, ce qui ne rend pas le texte vertical. 270deg sera, mais j'ai seulement fait la démo pour montrer la rotation.
Approche alternative: http://www.thecssninja.com/css/real-text-rotation-with-css
p { writing-mode: tb-rl; }
-webkit-transform: rotate(90deg);
Les autres réponses sont correctes mais elles ont entraîné des problèmes d’alignement. En essayant différentes choses, ce code de pièce CSS fonctionnait parfaitement pour moi.
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
}
Je recherchais un texte vertical réel et non le texte pivoté en HTML, comme indiqué ci-dessous. Donc, je pourrais y arriver en utilisant la méthode suivante.
HTML: -
<p class="vericaltext">
Hi This is Vertical Text!
</p>
CSS: -
.vericaltext{
width:1px;
Word-wrap: break-Word;
font-family: monospace; /* this is just for good looks */
}
Mise à jour: - Si vous avez besoin d'afficher les espaces , ajoutez la propriété suivante à votre css.
white-space: pre;
Donc, la classe css doit être
.vericaltext{
width:1px;
Word-wrap: break-Word;
font-family: monospace; /* this is just for good looks */
white-space: pre;/* this is for displaying whitespaces */
}
Démo JSFiddle! Avec des espaces
Mise à jour 2 (28-JUN-2015)
Puisque white-space: pre; ne semble pas fonctionner (pour cet usage spécifique) sur Firefox (à partir de maintenant), il suffit de changer cette ligne en
white-space: pre-wrap;
Donc, la classe css doit être
.vericaltext{
width:1px;
Word-wrap: break-Word;
font-family: monospace; /* this is just for good looks */
white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}
Pour faire pivoter le texte de 90 degrés:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
En outre, il semble que la balise span ne puisse pas être pivotée sans être configurée pour afficher: bloc.
Pour le texte vertical avec les caractères les uns en dessous des autres dans Firefox, utilisez:
text-orientation: upright;
writing-mode: vertical-rl;
Essayez d'utiliser:
writing-mode: lr-tb;
Je suis nouveau dans ce domaine, cela m'a beaucoup aidé. Il suffit de changer la largeur, la hauteur, en haut et à gauche pour l'adapter:
.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}
Vous pouvez aussi aller ici et voir une autre façon de le faire. L'auteur le fait comme ceci:
.vertical-text {
transform: rotate(90deg);
transform-Origin: left top 0;
float: left;
}
Ajouter la classe
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
Je l’utilise presque tous les jours et je n’ai eu aucun problème avec.
Peut utiliser la propriété CSS3 Transform
.txtdiv{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}
Pour afficher du texte verticalement (Bas-haut), nous pouvons simplement utiliser:
_writing-mode: vertical-lr;
transform: rotate(180deg);
__#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}__<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>_Notez que nous pouvons ajouter ceci pour assurer la compatibilité du navigateur:
_-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
_nous pouvons également en savoir plus sur la propriété writing-mode ici sur docs Mozilla.
#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>
la rotation, comme vous l'avez fait, est la voie à suivre - mais notez que tous les navigateurs ne la supportent pas. si vous voulez une solution multi-navigateur, vous devrez générer des images pour cela.
Voici un exemple de code SVG que j’ai utilisé pour insérer trois lignes de texte vertical dans un en-tête de colonne de tableau. D'autres angles sont possibles avec un peu de peaufinage. Je crois que la plupart des navigateurs supportent SVG ces jours-ci.
<svg height="150" width="40">
<text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
<text x="-150" y="25" transform="rotate(-90 0 0)">0/0 0/0</text>
<text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
Sorry, your browser does not support inline SVG.
</svg>
Vous pouvez obtenir le même résultat avec les propriétés CSS ci-dessous:
writing-mode: vertical-rl;
text-orientation: upright;
La meilleure solution serait d’utiliser writing-modewriting-mode: vertical-rl;https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
Il définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.
Il a un bon support du navigateur, mais ne fonctionnera pas sur IE8 (si vous vous souciez de IE) http://caniuse.com/#feat=css-writing-mode
Cela fonctionne aussi bien:
transform: rotate(90deg);
J'ai réussi à avoir une solution de travail avec ceci:
(J'ai un titre dans une classe middleItem div)
.middleItem > .title{
width: 5px;
height: auto;
Word-break:break-all;
font-size: 150%;
}
Essayez d’utiliser un fichier SVG, il semble avoir une meilleure compatibilité avec les navigateurs et ne cassera pas vos conceptions réactives.
J'ai essayé la transformation CSS et j'ai eu beaucoup de difficulté avec la transformation-Origin; et a fini par aller avec un fichier SVG. Cela a pris environ 10 minutes et je pouvais aussi le contrôler un peu avec CSS.
Vous pouvez utiliser Inkscape pour créer le fichier SVG si vous n’avez pas Adobe Illustrator.
.vertical-text {
transform: rotate(90deg);
transform-Origin: left top 0;
float: left;
}
<!DOCTYPE html>
<html>
<style>
h2 {
margin: 0 0 0 0;
transform: rotate(270deg);
transform-Origin: top left;
color: #852c98;
position: absolute;
top: 200px;
}
</style>
<body>
<h2>It’s all in the curd</h2>
</body>
</html>
Tu peux essayer comme ça
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
Vous pouvez utiliser Word-wrap: break-Word pour obtenir une utilisation de texte verticale après le snippete
HTML:
<div class='verticalText mydiv'>Here is your text</div>
css:
.verticalText {
Word-wrap: break-Word;
font-size: 18px;
}
.mydiv {
height: 300px;
width: 10px;
}
<style>
#text_orientation{
writing-mode:tb-rl;
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
}
</style>
</head>
<body>
<p id="text_orientation">Welcome</p>
</body>
h1{Word-break:break-all;display:block;width:40px;}
BONJOUR
REMARQUE: navigateur pris en charge - IE navigateur (8,9,10,11) - navigateur Firefox (38,39,40,41,42,43,44) - Chrome navigateur (44,45,46,47,48) - Navigateur Safari (8,9) - Navigateur Opera (non pris en charge) - Android navigateur (44)