html - 向左溢出产生滚动条

Question

这段代码使浏览器在内容大于窗口时有水平滚动条，向右溢出:

div.a {
  position: relative;
  float: left;
  background-color: red;
}
div.b {
  position: absolute;
  top: 100%;
  left: 100%;
  background-color: blue;
  white-space: nowrap;
}

<div class="a">Text1
  <div class="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>

但是，如果我让第一个 div 向右浮动，然后将第二个 div 定位在它的左侧，浏览器不会制作水平滚动条，并且无法查看溢出的文本。

div.a {
  position: relative;
  float: right;
  background-color: red;
}
div.b {
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
  white-space: nowrap;
}

<div class="a">
  Text1
  <div class="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>

我能否以某种方式改变这种行为，以便在内容大于窗口时向左滚动，溢出到左侧？

在 FF 47、IE 11、Opera 38 上测试 - 都做同样的事情。

如果 html/css 无法更改此行为，那么浏览器选择执行当前操作的原因是什么？有什么理由不能“修复”它们吗？对于仅支持从右到左语言的网站，当前的行为是否也会有问题，我认为这些网站希望能够使用这样的布局？

Answer 1

你有一个非常具体的例子，这样的事情对你有用吗？我确实需要使用一点 jquery(你可以用 javascript 来完成)。如果您没有任何其他会受到影响的内容，您可以在 HTML 标记上放置一个 rtl 并保持您在该元素上的绝对位置。

if ($("#b").prop('scrollWidth') > $("body").width() ) { //Security Check
  $('html').css('direction', 'rtl');
}
else {
  $('html').css('direction', 'ltr');
}

div.a
{
  position: relative;
  float: right;
  background-color: red;
}
div.b
{
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Text1
  <div class="b" id="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>