Можно ли перевести заполнитель текста от начала до конца? - PullRequest
Новая
       17

Можно ли перевести заполнитель текста от начала до конца?

1 голос
/ 29 апреля 2019

Я хотел бы перевести одну строку динамического текста заполнителя из начала в конец в текстовом вводе известной ширины (который скрывает переполнение)

Теперь я знаю, что для обычного контейнера div я могу использоватьof transforms для перехода правильной длины ...

, поэтому для контейнера длиной 100px я мог бы перейти в конец текста с помощью: transform: translateX(calc(100px - 100%)

div {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}
div {
  white-space: nowrap;
  overflow: hidden;
}
span {
  display: inline-block;
  animation: 4s scrollText forwards;
}

@keyframes scrollText {
  to {
      transform: translateX(calc(100px - 100%));
  }
}
<div><span>some really really really long text here</span></div>

Мне было интересно, смогу ли я достичь вышеуказанного эффекта с помощью заполнителя текста, используя псевдоэлемент заполнителя .

ИтакЯ попробовал следующее: 

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}

input::placeholder {
  color: red;
  animation: 4s scrollText;
  transform: translateX(0);
}

@keyframes scrollText {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(calc(100px - 100%));
  }
}
<input type="text" placeholder="some really really really long text here">

... но приведенный выше фрагмент не работает из-за ограничения свойств, доступных для псевдоэлемента заполнителя

Все свойства, которые применяются к псевдоэлементу :: first-line , также применяются к псевдоэлементу :: placeholder.

К сожалению, transform 1 не появляется в этом списке .

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

  1. Как ни странно, свойство transform, похоже, работало в Chrome при использовании без функции calc и анимации. 

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}

input::placeholder {
  color: red;
  transform: translateX(-50%);
}
<input type="text" placeholder="some really really really long text here">

1 Ответ

1 голос
/ 29 апреля 2019

Вы можете смоделировать это, используя дополнительную обертку, без использования заполнителя для элемента ввода: 

input {
  width: 100px;
  border: 2px solid green;
  padding: 5px;
  vertical-align:top;
  background:transparent; /* a transparent background to show the pseudo element */
}


.input {
  display:inline-block;
  margin: 10px;
  position:relative;
  z-index:0;
  overflow:hidden;
}

.input:before {
  content:attr(placeholder);
  position:absolute;
  left:5px;
  top:5px;
  white-space:nowrap; /* no line break */
  color: red;
  pointer-events:none; /* avoid any interaction */
  animation: 4s scrollText forwards;
  z-index:-1;
}

@keyframes scrollText {
  to {
      transform: translateX(calc(100px - 100%));
  }
}

/* hide the before on focus */
.input:focus-within:before{
   visibility:hidden;
}

/* add background to hide the before when there is text and no focus*/
input:not(:placeholder-shown) {
  background:#fff;
}
<div class="input" placeholder="some really really really long text here">
<input type="text" placeholder=" "> <!-- needs an empty placeholder for :placeholder-shown -->
</div>
...