Как установить ширину, когда текст так долго?

Question

Я делаю это для использования ползунка, но когда текст длинный или изменяет размер текста страницы в 2 строки, но мне нужна всего одна строка и отображается весь текст. Мне нужно, чтобы он работал в IE 9 и Firefox.

Вы можете увидеть проект в codepen

* {
  padding: 0;
  margin: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 250px;
  float: left;
  overflow: hidden;
}

.train {
  /*width: 100px;*/
  display: block;
  position: absolute;
  top: 32%;
  right: -100%;
  width: 50%;
  height: 80px;
  animation: train 20s linear infinite;
  -webkit-animation: train 8s linear infinite;
  text-align: right;
}

#one {
  background: yellow;
  animation-delay: 0s;
}

#two {
  background: blue;
  animation-delay: 2s;
}

#three {
  background: green;
  animation-delay: 4s;
}

#four {
  background: red;
  animation-delay: 6s;
}

@keyframes train {
  to {
    right: 100%;
  }
}

@-webkit-keyframes train {
  to {
    right: 100%;
  }
}

<div class="container">
  <ul>
    <li class="train" id="one">
      test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 finish
    </li>
    <li class="train" id="two">
      test 2 test2 test 2 test2 test 2 test2 test 2 test2 test 2 test2 v test 2 test2 test 2 test2 test 2 test2 test 2 test2 v test 2 test2 test 2 test2 test 2 test2 test 2 test2 test 2 test2 v test 2 test2 test 2 test2 test 2 test2 finish
    </li>
    <li class="train" id="three">
      test 3 test3 finish
    </li>
    <li class="train" id="four">
      test 4 test 4 test 4 finish
    </li>
  </ul>

</div>

Answer 1

вы можете использовать

white-space: nowrap;

, но IE9 не поддерживает анимацию, вы можете использовать javascript для слайдера

Answer 2

Если ваш текст не помещается в контейнер, он будет перемещен в другую строку. Вы можете добавить

> white-space: nowrap;

Или добавить к элементу с классом .train следующие стили:

> display: block;
> overflow: hidden;
> text-overflow: ellipsis;

Эти стили будут вырезать текст и добавить пунктирную линию в конце.