[html] 세로 텍스트 방향

나는 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 에서 속성에 대한 자세한 내용을 읽을 수도 있습니다 .