javascript - 当元素宽度<视口(viewport)时居中对齐，当元素宽度>视口(viewport)时右对齐+滚动

Question

我希望有一个元素在视口(viewport)内居中，只要它比视口(viewport)小，并且只要它比视口(viewport)大，就可以滚动+向右对齐。像这样:

首先，我尝试不使用 JavaScript，但 float 和溢出相互冲突。然后我尝试在元素旁边放置一个带有 float: 的 div 并通过 Javascript 以编程方式设置其宽度。但是当元素小于视口(viewport)时，它不会粘在右侧。

我现在没有想法，非常欢迎任何建议。

Answer 1

我有一个解决方案，如果您可以用不间断空格实体替换文本中的常规空格，则该解决方案有效 :

http://codepen.io/anon/pen/vKgydN

以下是设置的重要部分:

.x1 { /* wrapper for text container */
  display: flex;
  flex-direction: row-reverse;
  overflow: hidden;
}
.x2 { /* text container */
  flex: 0 0 auto;
  display: inline-block;
  align-items: flex-start;
  margin: 0 auto;
}

因此，它是一个反向 Flex 容器，只有一个 Flex 元素，不允许增大或缩小，具有用于居中的 margin: 0 auto 和 align-items: flex-start code> 当它变得比父元素/视口(viewport)窄时右对齐。

编辑/附加说明:我忘记了滚动功能，现在我找不到解决方案。尽管如此，我还是把这个“一半的答案”留在这里 - 也许其他人会想出剩下的......