2

Eu estou com seguinte problema e queria saber se tem solução para isto eu fiz a estilização do texto no CSS tudo ok mas quando eu faço a seleção do texto com o mouse o texto fica sobreposto com uma margem branca, veja as imagens:

Imagem texto sobreposto

Imagem texto normal

Existe alguma solução para isto?Se sim, como proceder?

css:

.det_tex {
    position: absolute;
    height: 485px;
    width: 325px;
    background-color:green;

}
.tex_marca{
    top:60px;
    position: absolute;
    font-size: 18px;
    font-family: 'Titillium Web', sans-serif;
}
.tex_nome{
    top:85px;
    position: absolute;
    font-size: 30px;
    font-weight:bold;
    font-family: 'Titillium Web',sans-serif ;
    line-height: 26px;
    font-weight: 800;
}
5
  • 2
    poste o trecho do seu código para que possamos ajudar. Commented 20/01/2019 às 19:05
  • 1
    Acho que não tem como evitar isso pq vc tá usando um line-height menor que o padrão da fonte.
    – Sam
    Commented 20/01/2019 às 19:46
  • Pois então o line-height e o espaçamento entre linhas que eu queria manter ,no caso eu estou usando google fonte. Commented 20/01/2019 às 19:50
  • 1
    @RichardCarlos não quer colocar HTML também e meter tudo num snippet para ser mais simples ver o problema e tentar ajudar?
    – Jorge B.
    Commented 23/01/2019 às 10:49
  • 1
    Seleção de texto em cor transparente poderia ajudar? Commented 23/01/2019 às 10:59

1 Resposta 1

1

Olha existe um jeitinho que pode te ajudar. Tudo bem que não é muito elegante, e para se usar no site inteiro vai ser meio chato, mas resolve o problema de uma certa maneira...

inserir a descrição da imagem aqui

O que eu fiz aqui é usar um custom attr, que chamei de data-text e coloquei dentro dele o mesmo texto que está dentro da tag. Depois criei um pseudo-elemento ::after no elemento que tem o texto. E nesse ::after no CSS usei o content="" para incluir o texto do data-text, ficando assim: content: attr(data-text);

Como disse, talvez seja uma técnica não muito prática, mas em um texto ou outro pode te ajudar.

Repare que agora ao fazer a seleção a cor do BG não fica mais por cima do texto!

OBS: Deixei os comentes no código

.tex_nome::selection {
   background: #fff;
}
.det_tex {
    position: absolute;
    height: 485px;
    width: 325px;
    background-color:green;

}
.tex_marca{
    top:60px;
    position: absolute;
    font-size: 18px;
    font-family: 'Titillium Web', sans-serif;
}
.tex_nome{
    top:85px;
    position: absolute;
    font-size: 30px;
    font-weight:bold;
    font-family: 'Titillium Web',sans-serif ;
    line-height: 26px;
}
.tex_nome:nth-child(2){
    top:185px;
}

.tex_nome::after{
    /* Aqui seria o texto que vai ficar por cima do texto original */
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}
<div class="det_tex">
    <div class="tex_marca">marca</div>
    <div class="tex_nome">Lorem ipsum dolor sit amet consectetur.</div>
    <!-- o que estiver no data-text deve ser o mesmo texto dentro da tag -->
    <div class="tex_nome" data-text="Lorem ipsum dolor sit amet consectetur.">Lorem ipsum dolor sit amet consectetur.</div>
</div>

2
  • 1
    Sensacional hugocsl, mandou bem; muito obrigada pelo salve. Commented 23/01/2019 às 19:22
  • 1
    @RichardCarlos so esse esquema de duplicar o texto no data que eh meio chatinho, mas resolve ;)
    – hugocsl
    Commented 23/01/2019 às 19:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .