{ hide_text } Relatório de resumo de ocultação de texto CSS

{ hide_text } Relatório de resumo de ocultação de texto CSS

Uma demonstração de ocultação de texto CSS que compilei recentemente resumiu vários métodos, na esperança de encontrar a solução mais perfeita e colocá-la em meus próprios trechos de código. No entanto, no final, caí em uma situação em que a conclusão foi repetidamente anulada. Como existem tantos cenários e elementos de aplicação que precisam ser considerados, independentemente do navegador, diferentes terminais de aplicação e diferentes estruturas de tags terão diferentes soluções ideais. Portanto, em vez de esperar ser mais "preguiçoso" no trabalho, é melhor. para consolidar e acumular conhecimentos básicos como de costume, para que você possa ser mais útil quando precisar fazer concessões.

Por ter pouca experiência, é inevitável que haja erros e omissões na parte de demonstração. Caso encontre algum problema, espero que possa apontá-lo.

Demonstração da lista de métodos

1. Sem reservas: display:nenhum

Trecho de código:

(x) HTML

<p class="hide_display">Sou uma mensagem de molho de soja</p>

CSS

/* Violência escondida*/
.hide_display{display:none;}

compatibilidade:

vantagem:

• Conveniente e rápido
• Boa compatibilidade

deficiência:

• O leitor de tela não consegue ler
• Hiperlinks não são aplicáveis
• O texto alternativo da imagem requer o plano de fundo de outros rótulos
• Classificações de pesquisa de impacto
• O uso extensivo pode facilmente ser considerado uma trapaça de SEO

2. Escolha de compromisso: overflow:hidden/position:absolute/visibility:hidden

Trecho de código:

(x) HTML

<span class="hide_overflow">Eu sou o texto nº 1 sobre molho de soja</span>
<p class="hide_position">Eu sou o segundo texto sobre molho de soja</p>
<p class="hide_visibility">Eu sou o número 3 do texto sobre molho de soja</p>

CSS

/* Oculte o elemento e separe-o do fluxo de texto para que o elemento não afete outros elementos */
.hide_overflow{
altura:0px;
estouro: oculto;
display:block;/* Elementos embutidos são obrigatórios*/
float:left; /* Sai do fluxo de documentos ou position:absolute;*/
}
/* Posiciona fora do intervalo visível, fora do fluxo do texto, para que o elemento não afete outros elementos*/
.hide_position{
posição:absoluta;
esquerda:-32767px;
}
/* O princípio é o mesmo de .hide_position*/
.hide_visibility{
visibilidade:oculto;
position:absolute; /* Sair do fluxo de documentos*/
margem esquerda:-32767px;
}