Cut word with CSS

2

I have the following div.

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

I need the content from within 2036 to be reduced, and any content that appears within that div, show only the last two numbers, in case it would just be 36.

Can you do this with CSS or JQuery?

    
asked by anonymous 30.05.2018 / 19:56

3 answers

2

Dude, how do you put CSS in the question tag? I'll only respond with CSS.

Notice that the main point here is to use width with size in CH (character). So a% w / w of% would be the width of 2 characters.

Option 1:

Using width:2ch and direction:rtl in parent you align text to the right in a "window" in the box with overflow:hidden width. You do not need almost any 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>

Option 2:

With this in mind you can only cover the first two digits with a 2ch element, for example.

Note:

Note that it is just a css for any font size, because regardless of the font size, the width of the red box is always%

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>
    
30.05.2018 / 20:20
2

You can do this (explanations in the code):

$(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><spanclass="credit-font" id="valYearCD">2036</span>
    
30.05.2018 / 20:17
0

Friend you can use the jquery text () function to get the text and substr () to leave only the last two numbers:

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

This will display only the last 2 numbers of your text.

    
30.05.2018 / 20:03