Counting block length in characters (ch) css

Question

The question is this: you need to transfer the value in width to ch for different text blocks using css and html in order to apply the same style to text blocks of different lengths I certainly understand that these are not programming languages, but still ...

.wrapper{ display: flex; flex-wrap: wrap; width: 100%; justify-content: center; } .text { width: 5ch; overflow: hidden; background-color: red; animation: printed-text 2s steps(21); } @keyframes printed-text{ from { width: 0%; } }

 <div class="wrapper"> <span class="text">lorem</span> </div> <div class="wrapper"> <span class="text">loremlorem</span> </div>

SnakeMS SnakeMS 592 9 · Accepted Answer · 2019-02-12T16:08:04

 $(".text").each(function(){ $(this).css("width",$(this).text().length+"ch"); })

 .wrapper{ display: flex; flex-wrap: wrap; width: 100%; justify-content: center; } .text { width:5ch; overflow: hidden; background-color: red; animation: printed-text 2s steps(21); } @keyframes printed-text{ from { width: 0%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="wrapper"> <span class="text">lorem</span> </div> <div class="wrapper"> <span class="text">loremlorem</span> </div>

Anton Kashin Anton Kashin 47 eight · Answer 2 · 2019-02-12T16:38:06

 :root { --t: 1ch; } .wrapper{ display: flex; flex-wrap: wrap; width: 100%; justify-content: center; } .text { width: var(--t); overflow: hidden; background-color: red; animation: printed-text 2s steps(21); } @keyframes printed-text{ from { width: 0%; } }

 <div class="wrapper"> <span class="text" style="--t:5ch">lorem</span> </div> <div class="wrapper"> <span class="text" style="--t:10ch">loremlorem</span> </div>

Counting block length in characters (ch) css

2 answers 2

More articles: