Почему японские символы ведут себя по-разному в анимации ширины CSS? - PullRequest
Новая
       17

Почему японские символы ведут себя по-разному в анимации ширины CSS?

0 голосов
/ 27 июня 2019

https://codepen.io/anon/pen/agVbPE?editors=1100

Лучше всего визуализировать.При изменении ширины элемента японские символы появляются и исчезают прерывистым, негладким образом, тогда как английские и другие, казалось бы, случайные символы utf-8 - нет. 

.border {
  border: 1px dotted black;
  height: 20px;
  width: 10px;
  overflow: hidden;
  transition: width 2s;
}

.border:hover {
  width: 100px;
}
<div class="border">
トムヤムクンスープ
</div>

<div class="border">
ENGLISH 
</div>

<div class="border">
ÿÿÿÿÿÿÿÿÿÿÿÿÿÿ
</div>

<div class="border">
ぁぁぁぁぁぁぁぁぁ 
</div>

<div class="border">
ൾൾൾൾൾൾൾൾൾൾൾൾൾൾൾ
</div>

Избавление от text-overflow: ellipsis; решило эту проблему для меня локально.

...