2

Eu tenho a seguinte div.

<span class="credit-font" id="valYearCD">2036</span>

Preciso que o conteúdo de dentro 2036 seja reduzido, e todo conteúdo que aparecer dentro dessa div, mostre apenas os dois últimos números, no caso seria apenas o 36.

Tem como fazer isso com CSS ou JQuery?

3 Respostas 3

2

Cara como vc colocou CSS na tag da pergunta vou te responder apenas com CSS.

Repare que o ponto principal aqui é usa o width com o tamanho em CH (character). Então um width:2ch seria a largura de 2 caractéres.

Opção 1:

Usando direction:rtl e overflow:hidden no pai vc alinha o texto a direita em uma "janela" no box com 2ch de largura. Não precisa de quase nada de css.

.box {
    width: 2ch;
    background-color: #f00;
    direction: rtl;
    overflow: hidden;
    font-size:3rem;
}
<div class="box">
  <span class="credit-font" id="valYearCD">2036</span>
</div>


Opção 2:

Com isso em mente vc consegue cobrir só os dois primeiros dígitos com um elemento ::after por exemplo.

OBS: Repare que é só um css para qualquer tamanho de font, pois independente do tamanho da fonte a largura do box vermelho é sempre 2ch

span {
    display: inline-block;
    width: 4ch;
    position: relative;
}
span::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2ch;
    background-color: #f00;
}
<span class="credit-font" id="valYearCD">2036</span>
        <br><br>
        <span style="font-size: 3rem;" class="credit-font" id="valYearCD">2036</span>
        <br><br>
        <span style="font-size: 6rem;" class="credit-font" id="valYearCD">2036</span>

2
  • Ótimo, funcionou. Mas, vi que ele mantem o espaço dos dois primeiros números. 30/05/2018 às 18:30
  • @FelipeGoulart na Opção 1 ele corta tudo mesmo, na opção 2 ele deixa os caracteres ainda na tela, Eu sugiro usar a Opção 1
    – hugocsl
    30/05/2018 às 18:32
2

Pode fazer desta forma (explicações no código):

$(document).ready(function(){      // DOM carregado
   var elm = $("#valYearCD");      // elemento
   var txt = elm.text();           // texto do elemento
   var fim = txt.match(/\d{2}\b/); // pega os 2 últimos algarismos
   elm.text(fim);                  // altera o texto do elemento
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="credit-font" id="valYearCD">2036</span>

4
  • Ele só altera no click? Tem como vir por padrão já? 30/05/2018 às 18:20
  • É só trocar a função de onclick para onload por exemplo.
    – LeAndrade
    30/05/2018 às 18:22
  • @FelipeGoulart Alterado!
    – Meu ovo
    30/05/2018 às 18:25
  • @FelipeGoulart Coloquei o botão com clique apenas para ilustrar 👍🏻
    – Meu ovo
    30/05/2018 às 18:28
0

Amigo você pode utilizar a função text() do jquery para pegar a text e o substr() para deixar apenas os dois últimos números:

$('#valYearCD').text($('#valYearCD').text().substr($('#valYearCD').text().length - 2, $('#valYearCD').text().length));

Desse modo irá mostrar apenas os 2 últimos números do seu texto.

3

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 .