나는 ms-word 표에서 할 수있는 것처럼 텍스트를 세로 방향으로 이동하려고 노력해 왔지만 지금 까지이 작업을 수행 할 수 있었지만 상자가 회전했기 때문에 만족하지 않습니다. t 실제 세로 방향 텍스트를 갖는 방법이 있습니까?

텍스트를 수직으로 만들지 않는 데모에서는 회전을 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 (2015 년 6 월 28 일)

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 데모 FF 호환.

텍스트를 90도 회전하려면 :

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

또한 display : block으로 설정하지 않으면 span 태그를 회전 할 수없는 것으로 보입니다.

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

Mozilla 문서writing-mode 에서 속성에 대한 자세한 내용을 읽을 수도 있습니다 .

나는 이것에 익숙하지 않고 많은 도움이되었습니다. 너비, 높이, 상단 및 왼쪽을 변경하여 맞 춥니 다.

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

나는 이것으로 작업 솔루션을 관리했습니다.

(middleItem 클래스 div 내에 제목이 있습니다)

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

가장 좋은 해결책은 https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode 를 사용하는 것입니다.writing-mode writing-mode: vertical-rl;

텍스트 줄이 가로 또는 세로로 배치되는지 여부와 블록이 진행되는 방향을 정의합니다.

브라우저 지원은 좋지만 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 속성은 한 줄에있는 텍스트 문자의 방향을 설정합니다. 세로 모드의 텍스트에만 영향을줍니다 (쓰기 모드가 가로 TB가 아닌 경우). 세로 스크립트를 사용하는 언어의 표시를 제어하고 세로 테이블 헤더를 만드는 데 유용합니다.

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 변환을 시도했고 transform-origin에 많은 문제가있었습니다. SVG 파일로 끝났습니다. 10 분 정도 걸렸고 CSS로도 제어 할 수있었습니다.

Adobe Illustrator가없는 경우 Inkscape를 사용하여 SVG를 만들 수 있습니다.

이것은 잘 작동합니다.

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>