css - 文本这么长时如何设置宽度？

Question

我做这个是为了使用 slider ，但是当文本很长或者在 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;

或者将以下样式添加到具有 .train 类的元素:

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

这些样式会剪切文本并在末尾添加虚线。