Sebrepositioning

Asked

Viewed 73 times

2

I have the following problem and wanted to know if there is a solution for this I did the styling of the text in CSS everything ok but when I do the selection of the text with the mouse the text is superimposed with a white margin, see the images:

Imagem texto sobreposto

Imagem texto normal

Is there any solution to this? If so, how to proceed?

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;
}
css html5
  • 2

    post the snippet of your code so we can help.

  • 1

    I guess there’s no way to avoid it because you’re using a line-height smaller than the font standard.

  • Because then the line-height and the spacing between lines I wanted to keep ,in case I’m using google font.

  • 1

    @Richardcarlos doesn’t want to put HTML in either and put it all in a snippet to make it easier to see the problem and try to help?

  • 1

    Transparent color text selection could help?

1 answer

1


Look, there’s a way that can help you. All right that is not very stylish, and to use the entire site will be kind of boring, but solves the problem in a certain way...

inserir a descrição da imagem aqui

What I’ve done here is wear one custom attr, who I called data-text and put inside it the same text that is inside the tag. Then I created a pseudo-element ::after in the element that has the text. And in that ::after in the CSS I used the content="" to include the text of data-text, being like this: content: attr(data-text);

Like I said, maybe it’s not a very practical technique, but in one text or another it can help you.

Note that now when selecting the BG color is no longer above the text!

OBS: I left the comments in the code

.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>

  • 1

    Sensational hugocsl, well done; thank you so much for saving.

  • 1

    @Richardcarlos is just this scheme to duplicate the text on the date that is kind of boring, but solves ;)

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.