이 기술은 일반적으로 음수 텍스트 들여 쓰기를 사용하는 이유는 무엇입니까?

Question

앵커를 이미지로 바꾸고 그 이미지를 앵커의 배경으로 지정한다고 가정 해 보겠습니다. 접근성을 위해 닻에 싸여있는 텍스트를 계속 표시하고 싶지만 보이지 않게해야합니다. 잘 알려진 기술은 text-indent : -9999px와 같은 것을 사용하는 것입니다. 오버 플로우와 함께 : 숨김;

우리 앵커 박스가 50px x 50px라고 가정하면, 우리는 왜 텍스트 들여 쓰기를하지 않습니까 : 50px? 이렇게하면 아무리 오래 걸리더라도 앵커의 숨겨진 오버플로에 텍스트가 표시됩니다. !

Answer 1

글쎄, 당신은 텍스트가 이상 50 픽셀 폭

http://jsfiddle.net/C29Ma/

<div class="image">Hide me please</div> 

div.image { 
    width: 50px; 
    height: 50px; 
    background: url(http://placehold.it/50x50) no-repeat; 
    text-indent: 50px; 
} 

때문에, 주위에 래핑 그렇게 할 때 그냥 어떻게되는지 살펴 보자. 첫 번째 줄만 50px만큼 들여 쓰기됩니다.

음수 들여 쓰기 기술은 유사 요소 또는 제어 단어 줄 바꿈에 대한 광범위한 지원이 있기 전에 발생했습니다. 그것은 일을 충분히 잘합니다. 그래서 사람들은 더 새롭고/더 나은 방법이있을 때 어떻게 행동 하는지를 바꾸지 않습니다.

귀하의 제안은

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

.hide-text { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}