Ẩn văn bản bằng css

Tôi có một thẻ trong html của mình như thế này:

<h1>My Website Title Here</h1>

Sử dụng css tôi muốn thay thế văn bản bằng logo thực tế của tôi. Tôi đã có logo không có vấn đề gì thông qua việc thay đổi kích thước thẻ và đặt hình nền vào trong thông qua css. Tuy nhiên, tôi không thể tìm ra cách loại bỏ văn bản. Về cơ bản, tôi đã thấy nó được thực hiện bằng cách đẩy văn bản ra khỏi màn hình. Vấn đề là tôi không thể nhớ nơi tôi đã nhìn thấy nó.

Đây là một cách:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Đây là một cách khác để ẩn văn bản trong khi tránh hộp 9999 pixel khổng lồ mà trình duyệt sẽ tạo:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Tại sao không sử dụng đơn giản:

h1 { color: transparent; }

Chỉ cần thêm font-size: 0;vào yếu tố của bạn có chứa văn bản.

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

Cách thân thiện với nhiều trình duyệt nhất là viết HTML dưới dạng

<h1><span>Website Title</span></h1>

sau đó sử dụng CSS để ẩn span và thay thế hình ảnh

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

Nếu bạn có thể sử dụng CSS2, thì có một số cách tốt hơn bằng cách sử dụng thuộc contenttính, nhưng thật không may, web chưa có 100% ở đó.

Ẩn văn bản với khả năng truy cập trong tâm trí:

Ngoài các câu trả lời khác, đây là một cách tiếp cận hữu ích khác để ẩn văn bản.

Phương pháp này che giấu văn bản một cách hiệu quả, nhưng vẫn cho phép nó hiển thị cho trình đọc màn hình. Đây là một lựa chọn để xem xét nếu khả năng tiếp cận là một mối quan tâm.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Thật đáng để chỉ ra rằng lớp này hiện đang được sử dụng trong Bootstrap 3 .

Nếu bạn thích đọc về khả năng truy cập:

• Sáng kiến ​​truy cập web (WAI)

• Tài liệu trợ năng MDN

Jeffrey Zeldman gợi ý giải pháp sau:

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

Nó nên ít sử dụng tài nguyên hơn -9999px;

Xin vui lòng đọc tất cả về nó ở đây:

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

Xem mezzoblue để biết tóm tắt về từng kỹ thuật, với điểm mạnh và điểm yếu, cộng với ví dụ html và css.

Rất nhiều giải pháp phức tạp.

Cách đơn giản nhất chỉ đơn giản là sử dụng:

color:rgba(0,0,0,0)

bạn chỉ có thể ẩn văn bản của mình bằng cách thêm thuộc tính này:

font size: 0 !important;

Không sử dụng { display:none; }Nó làm cho nội dung không thể truy cập. Bạn muốn trình đọc màn hình nhìn thấy nội dung của bạn và tạo kiểu trực quan cho nó bằng cách thay thế văn bản bằng một hình ảnh (như logo). Bằng cách sử dụng text-indent: -999px;hoặc một phương pháp tương tự, văn bản vẫn ở đó - chỉ không trực quan ở đó. Sử dụng display:none, và văn bản đã biến mất.

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

Trên đây cũng hoạt động tốt trong Thunderbird mới nhất.

bạn có thể sử dụng thuộc tính css background-imagevà z-indexđể đảm bảo hình ảnh ở phía trước văn bản.

Tại sao bạn không sử dụng:

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

Nếu bạn không có bất kỳ yếu tố span hoặc div nào, nó hoạt động hoàn hảo cho các liên kết.

Câu trả lời là tạo một nhịp với thuộc tính

{display:none;}

Bạn có thể tìm thấy một ví dụ tại trang web này

Đây thực sự là một khu vực chín muồi để thảo luận, với nhiều kỹ thuật tinh tế có sẵn. Điều quan trọng là bạn chọn / phát triển một kỹ thuật đáp ứng nhu cầu của bạn bao gồm: trình đọc màn hình, hình ảnh / css / kịch bản kết hợp bật / tắt, seo, v.v.

Dưới đây là một số tài nguyên tốt để bắt đầu con đường của các kỹ thuật thay thế hình ảnh tiêu chuẩn:

http://faq.css-stiterias.org/Image_Replocation

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Sử dụng thẻ Điều kiện cho các trình duyệt khác nhau và sử dụng css bạn phải đặt height:0pxvà width:0pxbạn cũng phải đặt font-size:0px.

Nếu mục đích chỉ đơn giản là làm cho văn bản bên trong phần tử trở nên vô hình, hãy đặt thuộc tính màu thành có độ mờ 0 bằng cách sử dụng giá trị rgba như color:rgba(0,0,0,0);sạch và đơn giản.

Tôi không nhớ tôi đã nhặt cái này ở đâu, nhưng đã sử dụng nó thành công từ lâu.

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

Mixin của tôi là trong sass tuy nhiên bạn có thể sử dụng nó bất kỳ cách nào bạn thấy phù hợp. Để có biện pháp tốt, tôi thường giữ một .hiddenlớp ở đâu đó trong dự án của mình để gắn vào các phần tử để tránh trùng lặp.

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

Hãy thử mã này để rút ngắn và ẩn văn bản

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}

<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

hoặc để ẩn sử dụng trong lớp css của bạn .hidetxt { visibility: hidden; }

đánh giá lại nội dung với CSS

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

Tôi thường sử dụng:

span.hide
{
  position:fixed;
  right:-5000px;
}

Nếu chúng ta có thể chỉnh sửa đánh dấu, cuộc sống có thể dễ dàng hơn, chỉ cần xóa văn bản và hạnh phúc. Nhưng đôi khi, việc đánh dấu được đặt bởi mã JS hoặc chúng tôi hoàn toàn không được phép chỉnh sửa nó, css quá tệ đã trở thành vũ khí duy nhất được sử dụng theo ý của chúng tôi.

Chúng tôi không thể đặt một <span>gói văn bản và ẩn toàn bộ thẻ. Nhân tiện, một số trình duyệt không chỉ che giấu các yếu tố display:nonemà còn vô hiệu hóa các thành phần bên trong.

Cả hai font-size:0pxvà color:transparentcó thể là giải pháp tốt, nhưng một số trình duyệt không hiểu chúng. Chúng ta không thể dựa vào họ.

Tôi đề nghị:

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

Sử dụng overflow:hiddenthực thi chiều rộng và chiều cao của chúng tôi. Một số trình duyệt (sẽ không đặt tên chúng là ... IE ) có thể đọc chiều rộng và chiều cao là min-widthvà min-height. Tôi muốn ngăn chặn hộp được mở rộng.

Sử dụng giá trị 0 cho font-sizevà line-heighttrong phần tử thực hiện mẹo cho tôi:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

Để ẩn văn bản khỏi html, hãy sử dụng thuộc tính văn bản thụt lề trong css

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ * đối với văn bản động, bạn cần thêm khoảng trắng, vì vậy css được áp dụng của bạn sẽ không làm phiền. nowrap có nghĩa là văn bản sẽ không bao giờ ngắt dòng tiếp theo, văn bản tiếp tục trên cùng một dòng cho đến khi <br>gặp thẻ

Một trong những cách tôi đạt được điều này là sử dụng :beforehoặc :after. Tôi đã sử dụng phương pháp này trong vài năm và đặc biệt hiệu quả với các biểu tượng vector glyph.

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

Điều này làm việc cho tôi với span (xác nhận loại trực tiếp).

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

Một giải pháp hiệu quả với tôi:

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

Câu trả lời tốt nhất hoạt động cho văn bản ngắn, nhưng nếu văn bản kết thúc tốt đẹp, nó chỉ hiển thị trong hình ảnh.

Một cách để làm điều đó là bắt lỗi với một trình xử lý jquery. Hãy thử tải một hình ảnh, nếu nó không thành công, nó sẽ báo lỗi.

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

Xem MÃ MẪU

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }