Safari에서 왼쪽 텍스트 오버플로 줄임표를 얻는 방법은 무엇입니까?

왼쪽 텍스트 오버플로 줄임표

긴 경로 목록으로 작업할 때 경로를 완전히 표시하는 것이 어려울 수 있습니다. 오른쪽의 중요한 정보는 계속 표시됩니다. 이 문제를 해결하려면 경로의 끝을 유지하면서 시작 부분을 자르는 왼쪽 텍스트 오버플로 줄임표를 구현할 수 있습니다.

Firefox 및 Chrome과 같은 브라우저와 달리 Safari는 현재 이 기능에 대한 지원이 부족합니다. CSS만 사용합니다. 그러나 CSS 속성의 조합을 해결 방법으로 사용할 수 있습니다.

CSS 솔루션:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

설명:

• white-space: nowrap은 텍스트가 여러 줄로 넘어가는 것을 방지합니다. 라인.
• overflow: Hidden은 텍스트에서 넘친 부분을 숨깁니다.
• text-overflow: ellipsis는 텍스트가 사용 가능한 너비를 초과할 때 줄임표 추가를 트리거합니다.
• width는 경로 컨테이너의 최대 너비를 지정합니다.
• direction: rtl은 텍스트 방향을 오른쪽에서 왼쪽으로.
• text-align: left는 텍스트를 컨테이너의 왼쪽에 정렬하여 효과적으로 왼쪽에 줄임표를 배치합니다.

예:

<p>first > second > third<br />
second > third > fourth > fifth > sixth<br />
fifth > sixth > seventh > eighth > ninth</p>

이 CSS 해결 방법은 왼쪽 텍스트 오버플로를 표시하는 원하는 효과를 얻습니다. 긴 경로에서도 오른쪽에 중요한 정보가 계속 표시되도록 보장합니다.

위 내용은 Safari에서 왼쪽 텍스트 오버플로 줄임표를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!