Tôi đã cố gắng để văn bản đi theo hướng thẳng đứng như chúng ta có thể làm trong bảng ms-word nhưng cho đến nay tôi chỉ có thể làm được ĐIỀU NÀY ... điều mà tôi không hài lòng vì đó là một hộp được xoay ... Isn ' Có cách nào để có văn bản hướng dọc thực tế không?

Tôi chỉ đặt xoay 305 độ trong bản trình diễn, điều này không làm cho văn bản thẳng đứng. 270degsẽ nhưng tôi chỉ thực hiện bản demo để hiển thị xoay.

Cách tiếp cận thay thế: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

Các câu trả lời khác đúng nhưng chúng dẫn đến một số vấn đề về căn chỉnh. Khi thử những thứ khác nhau, đoạn mã CSS này đã hoạt động hoàn hảo đối với tôi.

.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;
}

Tôi đang tìm kiếm một văn bản dọc thực tế chứ không phải văn bản xoay trong HTML như hình dưới đây. Vì vậy, tôi có thể đạt được nó bằng cách sử dụng phương pháp sau.

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 */
}

JSFiddle! Bản giới thiệu.

Cập nhật: - Nếu bạn cần các khoảng trắng được hiển thị, hãy thêm thuộc tính sau vào css của bạn.

white-space: pre;

Vì vậy, lớp css sẽ là

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle! Demo có khoảng trắng

Cập nhật 2 (28-JUN-2015)

Vì white-space: pre;dường như không hoạt động (cho mục đích sử dụng cụ thể này) trên Firefox (kể từ bây giờ), chỉ cần thay đổi dòng đó thành

white-space: pre-wrap;

Vì vậy, lớp css sẽ là

.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.*/
}

JsFiddle Demo FF Tương thích.

Để xoay văn bản 90 độ:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Ngoài ra, có vẻ như không thể xoay thẻ span mà không được đặt thành display: block.

Đối với văn bản dọc với các ký tự bên dưới một ký tự khác trong firefox, hãy sử dụng:

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

Hãy thử sử dụng:

writing-mode: lr-tb;

Để hiển thị văn bản theo chiều dọc (Từ dưới lên trên), chúng ta có thể chỉ cần sử dụng:

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>

Lưu ý rằng chúng tôi có thể thêm điều này để đảm bảo Khả năng tương thích của Trình duyệt:

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

chúng tôi cũng có thể đọc thêm về writing-modetài sản tại đây trên tài liệu Mozilla.

Tôi mới làm việc này, nó đã giúp tôi rất nhiều. Chỉ cần thay đổi chiều rộng, chiều cao, trên cùng và bên trái để làm cho nó vừa vặn:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

Bạn cũng có thể vào đây và xem một cách khác để thực hiện. Tác giả làm như thế này:

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

xoay vòng, như bạn đã làm, là một cách để đi - nhưng lưu ý rằng không phải tất cả các trình duyệt đều hỗ trợ điều đó. nếu bạn không muốn có được giải pháp đa trình duyệt, bạn sẽ phải tạo ảnh cho giải pháp đó.

Có thể sử dụng thuộc tính Chuyển đổi CSS3

.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 */
}

Thêm lớp học

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

Tôi sử dụng nó khá nhiều hàng ngày và không gặp bất kỳ vấn đề gì với nó.

https://css-tricks.com/snippets/css/text-rotation/

Tôi quản lý để có một giải pháp làm việc với điều này:

(Tôi có một tiêu đề trong div lớp middleItem)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

Đây là một ví dụ về một số mã SVG mà tôi đã sử dụng để lấy ba dòng văn bản dọc vào một tiêu đề cột của bảng. Các góc khác có thể thực hiện được với một chút tinh chỉnh. Tôi tin rằng hầu hết các trình duyệt hỗ trợ SVG ngày nay.

<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&nbsp;&nbsp;&nbsp;&nbsp;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>

Bạn có thể đạt được điều tương tự với các thuộc tính CSS bên dưới:

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

Giải pháp tốt nhất sẽ là sử dụng writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Nó xác định xem các dòng văn bản được bố trí theo chiều ngang hay chiều dọc và hướng mà khối tiến trình.

Nó có hỗ trợ trình duyệt tốt, nhưng sẽ không hoạt động trên IE8 (nếu bạn quan tâm đến IE) http://caniuse.com/#feat=css-writing-mode

.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>

Nếu bạn muốn có một biệt danh như

S
T
A
R
T

Sau đó theo dõi https://www.w3.org/International/articles/vertical-text/#upright-latin

Thí dụ:

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}

<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

Lưu ý rằng tiếng Hindi có trọng âm trong ví dụ của tôi và sẽ được hiển thị dưới dạng một ký tự duy nhất. Đó là vấn đề duy nhất tôi phải đối mặt với giải pháp này.

Từ developer.mozilla.org

Thuộc tính CSS hướng văn bản đặt hướng của các ký tự văn bản trong một dòng. Nó chỉ ảnh hưởng đến văn bản ở chế độ dọc (khi chế độ viết không phải là ngang-tb). Nó hữu ích để kiểm soát việc hiển thị các ngôn ngữ sử dụng tập lệnh dọc và cũng để tạo tiêu đề bảng dọc.

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

Bạn cũng có thể xem lại tất cả các Cú pháp tại đây

/* 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;

Bạn có thể sử dụng word-wrap: break-word để lấy văn bản dọc, sử dụng đoạn trích sau

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;} 

XIN CHÀO

LƯU Ý: Trình duyệt được hỗ trợ - Trình duyệt IE (8,9,10,11) - Trình duyệt Firefox (38,39,40,41,42,43,44) - Trình duyệt Chrome (44,45,46,47,48) - Safari trình duyệt (8,9) - Trình duyệt Opera (Không được Hỗ trợ) - Trình duyệt Android (44)

Hãy thử sử dụng tệp SVG, tệp này dường như có khả năng tương thích với trình duyệt tốt hơn và sẽ không phá vỡ các thiết kế đáp ứng của bạn.

Tôi đã thử chuyển đổi CSS và gặp nhiều rắc rối với biến đổi gốc; và kết thúc với một tệp SVG. Nó mất khoảng 10 phút và tôi cũng có thể kiểm soát nó một chút với CSS.

Bạn có thể sử dụng Inkscape để tạo SVG nếu bạn không có Adobe Illustrator.

Điều này cũng hoạt động:

transform: rotate(90deg);

Bạn có thể thử như thế này

-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

Đây là một giải pháp trình duyệt chéo một chút nhưng không yêu cầu CSS

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>