CSS : 텍스트 순서를 변경하지 않고 텍스트 오버플로 방향을 변경하십시오.

일부 텍스트가 있습니다. 왼쪽에서 (오버 플로우를 숨 깁니다.) 오버플로해야합니다. 기본적으로 다음과 같이 표시합니다. enter image description here CSS : 텍스트 순서를 변경하지 않고 텍스트 오버플로 방향을 변경하십시오.

명백히이 작업을 수행하려면 direction: rtl;이 필요합니다. hello, world?가 ?hello, world으로 표시되며, 1+2=3가 3=1+2으로 표시됩니다 Fiddle here.

문제는이 텍스트의 순서의 일부를 변경 것입니다.

나는 unicode-bidi 속성으로 게임을 시도했지만, 그럴 경우에만 을 오른쪽으로 완전히 개 넣을 수 있습니다.

실제 질문은 다음과 같습니다. 텍스트의 순서를 바꾸지 않고 텍스트 왼쪽에서 컨테이너가 넘치도록 텍스트를 가져올 수 있습니까?

출처

2011-09-11 Nathan

"예상 출력"예를 게시 할 수 있습니다 – PhD

@ 누풀이 업데이트했습니다. – Nathan

시도 :

text-align:right; 
white-space:nowrap; 
overflow:visible;

출처

2011-09-11 18:56:02

작동하지 않습니다. [forked fiddle] (http://jsfiddle.net/6JF9T/1/)을 참조하십시오. 다시 말하지만, 아이디어는 오른쪽이 아닌 왼쪽에서 벗어나는 텍스트를 만드는 것입니다. – Nathan

h1 너비를 지정하지 않고 오른쪽으로 띄우면됩니다. 그것은 왼쪽에 오버플로됩니다. 그게 당신이 찾고있는 것이겠습니까? http://jsfiddle.net/6JF9T/3/ –

아, 알겠습니다. 고마워, 고마워. 문제는 오버 플로우 텍스트를 숨길 필요가 있다는 것입니다 (첫 줄에 괄호 참조). – Nathan

당신은 당신이 조작해야하는 텍스트의 특정 블록과 같이 음의 값으로 text-indent 속성을 시도하는 경우 :

text-indent: -20px

이 아마 원 그래도 동적 인 텍스트 작업.

출처

2011-09-11 19:06:41 Brombomb

텍스트가 동적입니다 :( – Nathan

당신은 방향 LTR이있는 기간에 영어 텍스트를 포장해야합니다, 그리고 오버 플로우 텍스트가 "인라인 플렉스"다음과 같은 :

<div style="direction:rtl;width:150px;overflow:hidden;text-align:right;white-space:nowrap;"> 
    <div style="display:inline-flex"> 
     <span style="direction:ltr;">Hello people, I'm asking: 1+1=2, or what???</span> 
    </div> 
</div>

당신은 얻을 것이다 : http://codepen.io/anon/pen/xKfGa

몇 가지 방법이 복잡하지만 IE에서 완벽하게 표시되지는 않지만 이것이 유일한 올바른 방법이라고 생각합니다.

출처

2013-11-10 06:23:20 Khattab

CSS : 텍스트 순서를 변경하지 않고 텍스트 오버플로 방향을 변경하십시오.

답변

관련 문제