0

Вопрос заключается в следующем: нужно в 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>

2 ответа 2

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>

1
  • Решение хорошее, но в safari не работает.
    – meine
    12 фев 2019 в 17:00
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.