当元素重叠时，如何隐藏元素的开头而不是结尾？

Question

我正在尝试获取一个 div 元素来隐藏与结尾相对的文本开头。如果这没有意义，请参阅 fiddle - http://jsfiddle.net/L7zd8uyb/1/

当您减小屏幕宽度时，'paragraph' 将隐藏在最右边的 div 后面。有没有可能到这个div然后开始躲'some'在最左边的div后面？

HTML:

<div id="leftside">Left</div>
<div id="rightside">Right</div>

<div>
    <span>Some paragraph.</span>
</div>

CSS:

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
  background-color: red;
}

#rightside{
  position: absolute;
  right: 0;
  width: 150px;
  background-color: red;
}
span {
  margin-left: 200px;
}

注意：JSFiddle 是从这个问题中提供的示例中简化而来的 - How can I prevent HTML elements from overlapping or sliding under one another?

Answer 1

您的 margin-left: 200px 阻止它与您的 #leftside div 重叠。

为您的 CSS 试试这个：

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
  background-color: red;
  z-index: 2; /* this will overlap #rightside */
}


#rightside{
  position: absolute;
  right: 0;
  width: 150px;
  background-color: green;
  z-index: 1; /* this will overlap span */
}
span {
  position: fixed;
  left: 40%; /* change this to what you need, depending on #leftside */
}

Answer 2

添加这些样式：

span {
  position: absolute;
  right: 150px;                  /* width of Right element */
  white-space: nowrap;           /* prevent wrapping */
  min-width: calc(100% - 350px); /* difference of Left and Right widths */
}

#leftside {
  z-index: 1;                   /* cover the middle element if needed */
}

Fiddle

当元素重叠时，如何隐藏元素的开头而不是结尾？

How can I hide the start of an element instead of the end when it get's overlapped?

html

css

overflow