오른쪽 대신 왼쪽으로 오버플로

overflow:hidden사용자가 입력 할 때 전화 번호를 표시 하는 div가 있습니다. div 내부의 텍스트는 오른쪽으로 정렬되고 들어오는 문자는 텍스트가 왼쪽으로 커짐에 따라 오른쪽에 추가됩니다.

그러나 텍스트가 div에 맞지 않을만큼 충분히 크면 숫자의 마지막 문자가 자동으로 잘리고 사용자가 입력 한 새 문자를 볼 수 없습니다.

내가하고 싶은 것은 div가 콘텐츠의 가장 오른쪽을 표시하고 왼쪽으로 넘쳐나는 것처럼 왼쪽 문자를 자르는 것입니다. 이 효과를 어떻게 만들 수 있습니까?

다음을 사용해 보셨습니까?

direction: rtl;

자세한 내용은 http://www.w3schools.com/cssref/pr_text_direction.asp를 참조하십시오
.

나는 같은 문제가 있었고 두 개의 div를 사용하여 해결했습니다. 외부 div는 왼쪽에서 클리핑을 수행하고 내부 div는 오른쪽에서 플로팅을 수행합니다.

.outer-div {
  width:70%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
}

.inner-div {
  float:right;
}

:

<div class="outer-div">
  <div class="inner-div">     
    <p>A very long line that should be trimmed on the left</p>
  </div>
</div>

내부 div 안에 콘텐츠를 넣고 왼쪽에서 오버플로 할 수 있어야합니다.

할 수 float:right있고 왼쪽으로 오버플로되지만 제 경우에는 창이 요소보다 크면 div를 중앙에 배치해야하지만 창이 더 작 으면 왼쪽으로 오버플로됩니다. 그것에 대한 생각은?

나는 놀아 보았지만 direction:rtl블록 요소의 오버플로를 변경하지 않는 것 같습니다.

유일한 답은 오른쪽에 div가 오른쪽에 있고 오른쪽에 div가 있고 jquery를 사용하여 div의 너비를 오른쪽에 나머지 창 공간의 절반으로 설정하는 것 뿐이라고 생각합니다.

쉽게 수행 <span>할 수 있으며 오버플로가 숨겨진 요소 내부의 오른쪽에 스팬 절대 위치를 지정합니다.

<div style="width: 65px; height: 20px;
            overflow: hidden; position: relative; background: #66FF66;">
    <span style="position: absolute; right: 0;">05451234567</span>
</div>

:)

rgrds 제이크

이것은 매력처럼 작동했습니다.

<div style="direction: rtl;">
  <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>

HTML 마크 업을 수정하고 WebWanderer의 jsFiddle 솔루션에 일부 자바 스크립트를 추가했습니다.

https://jsfiddle.net/urulai/bfzqgreo/3/

HTML :

<div id="outer-div">

    <p>ipsum dolor amet bacon venison porchetta spare ribs, tongue turducken alcatra doner leberkas t-bone rump ball tip hamburger drumstick. Shoulder strip steak ribeye, kielbasa fatback pig kevin drumstick biltong pork short loin rump. Biltong doner ribeye, alcatra landjaeger tenderloin drumstick t-bone pastrami andouille. Sirloin spare ribs fatback, bresaola strip steak alcatra landjaeger kielbasa cupim doner. </p>

</div>

CSS :

#outer-div {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
  border:1px solid black;
}

JS :

let outer = document.getElementById("outer-div");
outer.scrollLeft += outer.scrollWidth;