ฉันพยายามให้ข้อความไปในแนวตั้งเหมือนที่เราทำได้ในตาราง ms-word แต่จนถึงตอนนี้ฉันทำได้แค่นี้ ... ซึ่งฉันไม่พอใจเพราะมันหมุนกล่อง ... Isn ' ไม่มีวิธีที่จะมีข้อความทิศทางแนวตั้งจริง?

ฉันตั้งค่าการหมุนเป็น 305 องศาเท่านั้นในการสาธิตซึ่งไม่ทำให้ข้อความเป็นแนวตั้ง 270degจะ แต่ฉันทำการสาธิตเพื่อแสดงการหมุนเวียนเท่านั้น

แนวทางอื่น: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

คำตอบอื่นถูกต้อง แต่นำไปสู่ปัญหาการจัดตำแหน่ง ในการลองสิ่งต่างๆโค้ดชิ้นส่วน CSS นี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน

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

ฉันกำลังค้นหาข้อความแนวตั้งจริงไม่ใช่ข้อความที่หมุนใน HTML ดังที่แสดงด้านล่าง ฉันจึงทำได้โดยใช้วิธีต่อไปนี้

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! การสาธิต.

อัปเดต: -หากคุณต้องการให้แสดงช่องว่างให้เพิ่มคุณสมบัติต่อไปนี้ใน css ของคุณ

white-space: pre;

ดังนั้นคลาส css จะเป็น

.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! สาธิตด้วยช่องว่าง

อัปเดต 2 (28 มิ.ย. 2558)

เนื่องจาก white-space: pre;ดูเหมือนจะใช้งานไม่ได้ (สำหรับการใช้งานเฉพาะนี้) บน Firefox (ณ ตอนนี้) เพียงแค่เปลี่ยนบรรทัดนั้นเป็น

white-space: pre-wrap;

ดังนั้นคลาส css จะเป็น

.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 เข้ากันได้

ในการหมุนข้อความ 90 องศา:

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

นอกจากนี้ดูเหมือนว่าไม่สามารถหมุนแท็กช่วงโดยไม่ได้ตั้งค่าให้แสดง: บล็อก

สำหรับข้อความแนวตั้งที่มีอักขระด้านล่างอีกตัวใน Firefox ให้ใช้:

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

ลองใช้:

writing-mode: lr-tb;

ในการแสดงข้อความในแนวตั้ง (ล่าง - บน) เราสามารถใช้:

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>

โปรดทราบว่าเราสามารถเพิ่มสิ่งนี้เพื่อให้แน่ใจว่าเข้ากันได้กับเบราว์เซอร์:

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

นอกจากนี้เรายังสามารถอ่านเพิ่มเติมเกี่ยวกับwriting-modeทรัพย์สินได้ที่นี่ในMozilla docs

ฉันใหม่สำหรับเรื่องนี้มันช่วยฉันได้มาก เพียงแค่เปลี่ยนความกว้างความสูงด้านบนและด้านซ้ายเพื่อให้พอดี:

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

คุณสามารถไปที่นี่และดูวิธีอื่นในการทำได้ ผู้เขียนทำเช่นนี้:

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

การหมุนเช่นเดียวกับที่คุณทำคือหนทางไป - แต่โปรดทราบว่าเบราว์เซอร์บางตัวไม่รองรับสิ่งนั้น หากคุณไม่ต้องการใช้โซลูชันข้ามเบราว์เซอร์คุณจะต้องสร้างรูปภาพสำหรับสิ่งนั้น

สามารถใช้คุณสมบัติ 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 */
}

เพิ่มชั้นเรียน

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

}

ฉันใช้สิ่งนี้เป็นประจำทุกวันและไม่มีปัญหาใด ๆ กับมัน

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

ฉันมีวิธีแก้ปัญหาที่ใช้งานได้:

(ฉันมีชื่ออยู่ในชั้น div ระดับ middleItem)

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

นี่คือตัวอย่างของโค้ด SVG ที่ฉันใช้เพื่อรับข้อความแนวตั้งสามบรรทัดในส่วนหัวคอลัมน์ของตาราง มุมอื่น ๆ ได้ด้วยการปรับแต่งเล็กน้อย ฉันเชื่อว่าเบราว์เซอร์ส่วนใหญ่รองรับ SVG ในทุกวันนี้

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

คุณสามารถบรรลุสิ่งเดียวกันด้วยคุณสมบัติ CSS ด้านล่าง:

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

ทางออกที่ดีที่สุดคือใช้writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

กำหนดว่าบรรทัดของข้อความจะวางในแนวนอนหรือแนวตั้งและทิศทางที่บล็อกความคืบหน้า

มีการสนับสนุนเบราว์เซอร์ที่ดี แต่จะไม่ทำงานบน IE8 (หากคุณสนใจเกี่ยวกับ 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>

หากคุณต้องการการจัดตำแหน่งเช่น

S
T
A
R
T

จากนั้นติดตามhttps://www.w3.org/International/articles/vertical-text/#upright-latin

ตัวอย่าง:

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>

โปรดทราบว่าภาษาฮินดีมีสำเนียงในตัวอย่างของฉันและจะแสดงเป็นอักขระเดี่ยว นั่นเป็นปัญหาเดียวที่ฉันต้องเผชิญกับการแก้ปัญหานี้

จากdeveloper.mozilla.org

คุณสมบัติ CSS การวางแนวข้อความตั้งค่าการวางแนวของอักขระข้อความในบรรทัด มีผลกับข้อความในโหมดแนวตั้งเท่านั้น (เมื่อโหมดการเขียนไม่ใช่แนวนอน -b) มีประโยชน์สำหรับการควบคุมการแสดงภาษาที่ใช้สคริปต์แนวตั้งและสำหรับการสร้างส่วนหัวตารางแนวตั้ง

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

คุณยังสามารถตรวจสอบไวยากรณ์ทั้งหมดได้ที่นี่

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

คุณสามารถใช้ word-wrap: break-word เพื่อรับข้อความแนวตั้งโดยใช้ตัวอย่างต่อไปนี้

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

สวัสดี

หมายเหตุ: รองรับเบราว์เซอร์ - เบราว์เซอร์ IE (8,9,10,11) - เบราว์เซอร์ Firefox (38,39,40,41,42,43,44) - เบราว์เซอร์ Chrome (44,45,46,47,48) - Safari เบราว์เซอร์ (8,9) - เบราว์เซอร์ Opera (ไม่รองรับ) - เบราว์เซอร์ Android (44)

ลองใช้ไฟล์ SVG ดูเหมือนว่าจะเข้ากันได้กับเบราว์เซอร์ที่ดีขึ้นและจะไม่ทำลายการออกแบบที่ตอบสนองของคุณ

ฉันลองแปลง CSS แล้วและมีปัญหากับการแปลงที่มา และลงเอยด้วยไฟล์ SVG ใช้เวลาประมาณ 10 นาทีและฉันก็ควบคุมมันได้ด้วย CSS ด้วย

คุณสามารถใช้ Inkscape เพื่อสร้าง SVG ได้หากคุณไม่มี Adobe Illustrator

สิ่งนี้ใช้ได้เช่นกัน:

transform: rotate(90deg);

ลองแบบนี้ก็ได้

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

นี่เป็นวิธีแก้ปัญหาเบราว์เซอร์ที่แฮ็คเล็กน้อย แต่ไม่ต้องใช้ CSS

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