CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvertical-text
Janis Jansen
Janis Jansen

Reputation: 1025

Bootstrap vertical writing

I want to write text with Bootstrap, vertically but not like transform the text 90°. Vertical, but turned and hard to read.

enter image description here

But actually written like this: Vertical and not turned

enter image description here

I think there was a way to do this with Bootstrap? Do you know something?

Upvotes: 8

Views: 33721

Answers (4)

CastenettoA
CastenettoA

Reputation: 693

You can do something like this:

CSS
      .verticaltext{
           width:1px;
           word-wrap: break-word;
           white-space:pre-wrap; 
        }

Upvotes: 16

Yamen Ashraf
Yamen Ashraf

Reputation: 2960

writing-mode: vertical-rl;
text-orientation: mixed;

// or

writing-mode: vertical-rl;
text-orientation: upright;

Also try these values

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

Upvotes: 9

vik1245
vik1245

Reputation: 556

You may want to see this tutorial!
https://davidwalsh.name/css-vertical-text

In simplicity, you can use CSS to do this. 

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
}

Upvotes: 8

Martin Campillo
Martin Campillo

Reputation: 24

There is absolutely no specific way in Bootstrap nor in CSS alone to write in his particular way ...

I guess the only way to do that kind of thing is to make a return to the line after every letter. Try the HTML <br> tag for example. The major issue with that kind of technique is semantics, considering the word will be split.

Upvotes: -4

Related Questions