오버플로를 왼쪽으로 흐르도록 구성할 수 있습니까?

오버플로는 일반적으로 콘텐츠가 오른쪽으로 흐르도록 하여 가장 왼쪽의 콘텐츠가 잘리도록 처리됩니다. 그러나 특정 CSS 스타일을 적용하여 이 동작을 되돌릴 수 있습니다.

해결책

왼쪽으로 오버플로를 활성화하려면 다음 단계를 따르세요.

1. 오버플로를 숨김으로 설정: 콘텐츠가 경계를 넘어 확장되지 않도록 컨테이너에 오버플로 숨김을 적용합니다.
2. 텍스트를 오른쪽에 정렬: text-align: right를 사용합니다. 컨테이너 내의 텍스트를 오른쪽으로 정렬합니다.
3. 방향 조정: 방향을 구현합니다: rtl 콘텐츠의 흐름을 반전합니다. 이렇게 하면 새 콘텐츠가 오른쪽에 추가되고 왼쪽으로 넘치게 됩니다.

예

.container {
  overflow: hidden;
  text-align: right;
  direction: rtl;
}

이러한 스타일을 적용하면 컨테이너 내의 콘텐츠가 왼쪽으로 오버플로되므로 가장 왼쪽 문자를 자르면서 최신 추가 내용을 볼 수 있습니다.

참조

더 자세한 내용은 W3Schools 기사를 참조하세요: http://www.w3schools.com/cssref/pr_text_direction.asp