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

Question

是否可以使用 CSS 以如下方式设置 transform: translateX():

… the content moves to the left until the end of the content reaches the right side of the parent container?

为了说明问题:

.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>