오른쪽 대신 왼쪽으로 넘쳐납니다

StackOverflow https://stackoverflow.com/questions/218065

  •  03-07-2019
  •  | 
  •  

문제

나는 div가있다 overflow:hidden,이 내부에는 사용자가 입력 한 전화 번호를 표시합니다. DIV 내부의 텍스트는 오른쪽에 정렬되며 텍스트가 왼쪽으로 커지면 들어오는 문자가 오른쪽에 추가됩니다.

그러나 텍스트가 DIV에 맞지 않을 정도로 커지면 숫자의 마지막 문자는 자동으로 자르고 사용자는 그녀가 입력 한 새 문자를 볼 수 없습니다.

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

overflowing phone number to left

도움이 되었습니까?

해결책

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

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의 너비를 jQuery로 나머지 창 공간의 오른쪽으로 오른쪽으로 설정합니다.

쉽게 끝나고 <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 솔루션에 일부 JavaScript를 추가했습니다.

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;
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top