{ hide_text } CSS 텍스트 숨기기 요약 보고서

{ hide_text } CSS 텍스트 숨기기 요약 보고서

최근 제가 편집한 CSS 텍스트 숨기기 데모는 가장 완벽한 해결책을 찾아내 코드 조각에 넣기를 바라면서 여러 가지 방법을 요약했습니다. 그러나 결국 결론이 반복적으로 뒤집히는 상황에 빠졌습니다. 브라우저에 관계없이 고려해야 할 애플리케이션 시나리오와 요소가 너무 많기 때문에 다양한 애플리케이션 터미널과 다양한 태그 구조에는 서로 다른 최적의 솔루션이 있으므로 작업에서 더 "게으른" 것을 기대하는 것보다 더 좋습니다. 평소처럼 기본 지식을 통합하고 축적하여 절충이 필요할 때 더 편리하게 사용할 수 있습니다.

경험이 부족해서 필연적으로 데모 부분에서 오류나 누락이 있을 수 있으니 문제점을 발견하시면 지적해주시면 감사하겠습니다.

메소드 목록 데모

1. 예약 없음: 표시: 없음

코드 조각:

(x)HTML

나는 간장문자입니다

CSS

/* 폭력 은폐*/
.hide_display{디스플레이:없음;}

호환성:

이점:

• 편리하고 빠릅니다.
• 좋은 호환성

결점:

• 스크린 리더가 읽을 수 없음
• 하이퍼링크를 적용할 수 없습니다.
• 이미지 대체 텍스트에는 다른 라벨의 배경이 필요합니다.
• 임팩트 검색 순위
• 광범위한 사용은 쉽게 SEO 부정행위로 간주될 수 있습니다.

2. 타협 선택: 오버플로:숨김/위치:절대/가시성:숨김

코드 조각:

(x)HTML

나는 간장텍스트 1위

나는 2등 간장텍스트

CSS

/* 해당 요소가 다른 요소에 영향을 미치지 않도록 요소를 숨기고 텍스트 흐름에서 분리합니다. */
.hide_overflow{
높이:0px;
오버플로:숨김;
display:block;/* 인라인 요소가 필요합니다*/
float:left; /* 문서 흐름 또는 위치에서 벗어나기:absolute;*/
}
/* 해당 요소가 다른 요소에 영향을 미치지 않도록 가시 범위 외부, 텍스트 흐름 외부에 배치합니다*/
.hide_position{
위치:절대;
왼쪽:-32767px;
}
/* 원칙은 .hide_position과 동일합니다*/
.hide_visibility{
가시성:숨김;
위치:절대; /* 문서 흐름에서 벗어나기*/
여백-왼쪽:-32767px;
}