자세 한 설명 CSS 부정 확 한 넘 침 텍스트 는 스크롤 에 적합 합 니 다.

hover 시 팝 업 상자 알림
실행 가능 한 방안 은 hover 일 때 텍스트 상 자 를 꺼 내 전체 텍스트 를 보 여 주 는 것 입 니 다.가장 간단 한 것 은 텍스트 탭 에 title 속성 을 추가 하여 우리 가 필요 로 하 는 내용 을 채 우 는 것 입 니 다.

<ul>
    <li title="    1     2     3     4">    1     2     3     4</li>
</ul>

물론 이런 방법 은 간단 하지만 사용자 체험 이 부족 할 수 있다.
본 고 는 텍스트 의 길이 가 확실 하지 않 고 용기 의 길이 도 확실 하지 않 은 상황 에서 임의의 길이 의 텍스트 가 hover 상태 에서 왼쪽 에서 오른쪽으로 스크롤 하여 텍스트 말단 으로 스크롤 한 다음 에 초기 위치 로 스크롤 하 는 것 을 간단하게 소개 합 니 다.이렇게 반복 합 니 다.이렇게:

용기 의 너비,텍스트 의 너비 가 정 해 지지 않 습 니 다.
우 리 는 먼저 우리 용기 의 너비 가 고정 되 어 있 지만 모든 텍스트 의 폭 은 확실 하지 않다 고 가정 합 니 다.
이렇게:

<div class="wrap">
    <p title="         ">         </p>
    <p class="scroll" title="            ">            </p>
    <p class="scroll" title="                ">                </p>
</div>

.wrap {
    position: relative;
    width: 150px;
    overflow: hidden;
}
 
p {
     white-space: nowrap;
}

inline-block 을 사용 하여 실제 텍스트 의 폭 을 가 져 옵 니 다.

태그 의 폭 이 부모 요소 의 100%이기 때문에,만약 그렇다면,우 리 는 아래 의 조작 을 하기 가 매우 어렵다.우 리 는 먼저 실제 텍스트 의 폭 을 가 져 야 합 니 다.여 기 는 inline-block 의 특성 을 빌려 이 점 을 실현 할 수 있 습 니 다.우 리 는 우리 의 CSS 를 개선 할 수 있 습 니 다.

p {
 +  display: inline-block;
    white-space: nowrap;
}

이렇게 하면 현재

탭 의 실제 폭 은 전체 텍스트 요소 의 너비 입 니 다.

Tips:여기 display:inline 을 사용 하지 않 은 것 은 다음 글 에서 p 요 소 를 굴 려 서 transform 을 사용 해 야 하기 때 문 입 니 다.그러나 transform 은 내 연 요소 위 에 작용 할 수 없습니다.구체 적 으로 규범 을 참고 할 수 있 습 니 다:transformanable element
스크롤 거 리 를 계산 하여 스크롤 합 니 다.
이렇게 해서 우 리 는 부모 요소 의 너비 150 px,텍스트 의 너비 가 생 겼 다.그러면 스크롤 이 필요 한 거 리 를 쉽게 얻 을 수 있 습 니 다.
스크롤 할 거리 S=넘 치 는 텍스트 요소 의 너비-부모 요소 의 너비
이렇게 하면 현재 텍스트 폭 이 변수 값 이 고 표시 할 수 있 는 것 만 찾 으 면 됩 니 다.transoform
transform:translate()를 사용 하여 위 치 를 이동 할 때 백분율 로 표시 하면 백분율 의 기준 요 소 는 요소 자체 입 니 다.즉,우리 transform:translate(100%,0)는 한 요소 자체 의 너비 거 리 를 오른쪽으로 이동 하 는 것 을 의미 합 니 다.
그러면 우 리 는 calc 를 통 해 상기 스크롤 해 야 할 거리 S-transform:translate(calc(-100%+150 px),0)를 쉽게 얻 을 수 있 고 애니메이션 에 삽입 할 수 있 습 니 다.

p:hover {
    animation: move 1.5s infinite alternate linear;
}
 
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(-100% + 150px), 0);
    }
}

이로써 용기 의 폭 을 초과 한 텍스트 에 대해 우 리 는 상술 한 효 과 를 쉽게 완성 할 수 있다.

부정 폭 문자 주마등 왔 다 갔다 스크롤 전시-부모 용기 너비,하위 요소 너비 부정
부모 용기 부정 폭
물론 아직 끝나 지 않 았 습 니 다.
부모 용기 의 너비 도 고정 되 지 않 거나,calc 호환성 문제 로 이 방법 을 사용 할 수 없습니다.그러면 우리 가 해 야 할 일 은 고정된 CSS 코드 에서 현재 요소 의 너비 도 운동 할 수 있 고 부모 용기 의 너비 도 이동 할 수 있다 는 것 이다.
공교롭게도 CSS 는 상술 한 요 구 를 완성 할 수 있 습 니 다.우 리 는 animation 의 코드 를 개조 합 니 다.

@keyframes move {
    0% {
        left: 0;
        transform: translate(0, 0);
    }
    100% {
        left: 100%;
        transform: translate(-100%, 0);
    }
}

transform:translate(-100%,0)는 자신의 너비 의 100%를 왼쪽으로 이동 할 수 있 습 니 다

4

left:100%오른쪽 으로 이동 하 는 부모 용기 너비 의 100%를 실현 할 수 있 습 니 다

margin-left 를 사용 하여 left 를 교체 하 는 것 도 마찬가지 로 이 루어 질 수 있 습 니 다.백분율 로 표시 하 는 margin-left 변위 의 기준 도 부모 요소 의 너비 입 니 다.
이렇게 하면 부모 용기 의 너비 가 어떻든 텍스트 요소 의 너비 가 어떻든 넘 치 는 텍스트 에 대한 스크롤 전 시 를 실현 할 수 있 습 니 다.
부정 폭 문자 주마등 왔 다 갔다 스크롤 전시-부모 용기 부정 폭,하위 요소 부정 폭
부분 부족 점
1.텍스트 길이 가 부모 요소 의 폭 을 초과 하 는 지 판단 할 수 없습니다.
물론 상기 방안 은 완벽 한 방안 이 아니다.만약 에 우리 가 본 논문 의 길이 가 넘 치 는 상황 에 만 hover 를 원 할 때 구 르 는 것 은 순수 CSS 를 사용 하 는 상황 에서 이 루어 질 수 없다.
현재 요소 의 길이 가 부모 요소 의 길이 보다 큰 지 CSS 를 통 해 선택 적 으로 애니메이션 을 할 수 없습니다.CSS 는 스타일 만 책임 지고 행동 을 통제 하지 않 기 때문이다.따라서 실제 사용 에 서 는 자바 스 크 립 트 의 간단 한 판단 을 통 해 클 라 스 를 통 해 제어 해 야 할 수도 있 습 니 다.
2.깜빡 임 애니메이션
부모 용기 의 너비 가 정 해 지지 않 은 상황 에서 두 속성 을 동시에 애니메이션 해 야 하고 변위 하 는 방향 이 반대 이기 때문에 애니메이션 은 약간 반 짝 거 릴 수 있 습 니 다.이것 은 잠시 특별히 좋 은 해결 방안 을 찾 지 못 했다.
이상 은 CSS 의 부정 확 한 넘 침 텍스트 가 스크롤 에 적합 한 상세 한 내용 입 니 다.CSS 의 부정 확 한 넘 침 텍스트 가 스크롤 에 적합 한 자 료 는 다른 관련 글 을 주목 하 십시오!