text-overflow: ellipsis를 사용하여 마우스를 올리면 전체 텍스트 표시

누군가가 이 게시물에서 영감을 얻었습니다

목록에서 텍스트 오버플로 규칙을 트리거하는 목록 항목에 대해서만 활성 제목 속성을 갖고 싶습니다. 따라서 잘린 텍스트 위로 마우스를 가져가면 전체 텍스트에 대한 툴팁을 볼 수 있습니다

제 접근 방식은 다음과 같습니다.

<div>
    <span><span>Some longer text visible on hover</span></span>
    <span><span>Another longer text visible on hover</span></span>
    <span><span>Short text</span></span>
</div>

div {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
div>span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span>span:hover {
    position: absolute;
    background-color: rgba(5, 255, 255, 1);
}

위 내용은 text-overflow: ellipsis를 사용하여 마우스를 올리면 전체 텍스트 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!