Giả sử tôi có đánh dấu sau:
<li><a href="somehwere">Link text</a></li>
Nếu tôi có hình nền trên thẻ, làm cách nào để ẩn văn bản liên kết chỉ bằng css? font-size: 0 dường như hoạt động tốt trên thẻ ngoại trừ trong chương trình ie7 đốm màu nhỏ.
line-height: 0;và font-size: 0;và text-indent: -999px. Nhưng nó vẫn xuất hiện một số đốm màu trong safari, bất kỳ ý tưởng nào?Câu trả lời:
Thử
a{
line-height: 0;
font-size: 0;
color: transparent;
}
Phần color: transparent;này đề cập đến vấn đề với trình duyệt Webkit vẫn hiển thị 1px văn bản.
Gói văn bản trong một khoảng và đặt visibility:hidden;Chế độ hiển thị ẩn sẽ ẩn phần tử nhưng nó vẫn chiếm cùng một không gian trên trang (ngược lại hiển thị: không loại bỏ nó khỏi trang).
a { text-indent:-9999px; }
Có xu hướng hoạt động tốt theo thời gian của tôi.
outlinetrên firefox. Hình chữ nhật phác thảo sẽ bắt đầu từ bên trái của khung nhìn trình duyệt.
Mẹo nhỏ:
Tôi đã có tình huống sau:
<a href="/page/">My link text
:after
</a>
Tôi đã ẩn văn bản bằng font-size: 0, vì vậy tôi có thể sử dụng biểu tượng FontAwesome cho nó. Điều này hoạt động trên Chrome 36, Firefox 31 và IE9 +.
Tôi không khuyên bạn nên chọn màu: trong suốt vì văn bản vẫn tồn tại và có thể chọn được. Sử dụng line-height: 0px không cho phép tôi sử dụng: after. Có lẽ vì phần tử của tôi là một khối nội tuyến.
Hiển thị: ẩn : Không cho phép tôi sử dụng: sau.
text-thụt lề: -9999px; : Cũng đã di chuyển phần tử: sau
Một tùy chọn khác là ẩn dựa trên lớp bootstraps "sr-only". Nếu bạn quấn văn bản trong một khoảng với lớp "sr-only" thì văn bản sẽ không được hiển thị, nhưng trình đọc màn hình vẫn có quyền truy cập vào nó. Vì vậy, bạn sẽ có:
<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>
Nếu bạn không sử dụng bootstrap, hãy giữ nguyên ở trên, nhưng cũng thêm css bên dưới để xác định lớp "sr-only":
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
Tôi đã làm theo câu trả lời hay nhất của Loktar và nó hoạt động rất tốt. Vấn đề duy nhất tôi gặp phải là với Chrome (phiên bản hiện tại của tôi là 27.0.1453,94 m). Vấn đề tôi gặp phải là có vẻ như Chrome biết rằng văn bản trong liên kết không hiển thị và nó đặt liên kết thấp hơn một chút thì nó được cho là như vậy (giống như margin-top, nhưng không thể thay đổi nó ). Điều này xảy ra với tất cả các cách mà chúng tôi làm cho văn bản ẩn: - line-height: 0; - cỡ chữ: 0; - text-thụt lề: -9999px;
Tôi đã có thể khắc phục sự cố này bằng cách điều chỉnh căn chỉnh dọc của liên kết như sau:
vertical-align: 25px;
Tôi hy vọng điều này là hữu ích
Chỉ cần thêm font-size: 0;vào phần tử của bạn có chứa văn bản. Điều này hoạt động tốt.
Bạn có thể đặt một hình ảnh vào :: before pseudoelement và đặt các kích thước giống như hình ảnh + thêm tràn: hidden, như:
li a::before{
content:url('img');
width:20px;
height:10px
}
a {
overflow:hidden;
width:20px;
height:10px
}
Tôi đã có thể khắc phục sự cố này bằng cách đặt font-size: 0 .
Làm thế nào về display: none;
Điều đó che giấu bất cứ điều gì.