如何使用CSS转换transformX元素，直到其内容的末尾到达父元素的右侧？

Question

CSS是否可以通过以下方式设置transform: translateX()：

…内容向左移动，直到内容的末尾到达父容器的右侧？

以说明问题：

.container {
  width: 200px;
  height: 20px;
  margin: 0 0 20px 0;
  border: 1px solid red;
  overflow: hidden;
}

.wrapper {
  display: block;
  white-space: nowrap;
}

.wrapper.moved {
  transform: translateX(-95px);
}

<div class="container">
  <span class="wrapper">Start of some content with an eventual end …</span>
</div>

<div class="container">
  <span class="wrapper moved">Start of some content with an eventual end …</span>
</div>

现在，在这里我明确地移动了内容。但是在现实生活中，我不知道内容有多长。当然，使用-100%之类的方法很有效。

因此，有一种方法-无需使用JavaScript计算溢出的宽度-即可移动内容直到其到达容器的右侧？

Answer 1

如果您的示例中知道容器的宽度，则可以使用calc()来执行此操作，但是必须使内部元素inline-block

.container {
  width: 200px;
  height: 20px;
  margin: 0 0 20px 0;
  border: 1px solid red;
  overflow: hidden;
}

.wrapper {
  display: inline-block;
  min-width:100%;
  white-space: nowrap;
}

.wrapper.moved {
  transform: translateX(calc(200px - 100%));
}

<div class="container">
  <span class="wrapper">Start of some content with an eventual end …</span>
</div>

<div class="container">
  <span class="wrapper moved">Start of some content with an eventual end …</span>
</div>

<div class="container">
  <span class="wrapper moved">Start of some content with an eventual end content with an eventual end …</span>
</div>

<div class="container">
  <span class="wrapper moved">Start of some content</span>
</div>