Подсчёт длины блока в символах(ch) css

115

03 октября 2019, 22:20

Вопрос заключается в следующем: нужно в width передать значение в ch для разных текcтовых блоков по средствам css и html, для того чтобы можно было применить один стиль для разных по длинне текстовых блоков Я конечно понимаю что это не языки программирования но всё же...

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

Answer 1

$(".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>

Answer 2

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