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;

或在.train类中添加以下样式：

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

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

Answer 2

您可以使用

white-space: nowrap;

但是IE9不支持动画，您可以将javascript用于滑块

文本太长时如何设置宽度？

2 个答案: