使用CSS隐藏部分遮挡的元素

Question

假设：

<div class='row'>
  <div class='c1'>hello</div>
  <div class='c2'>bob</div>
</div>

<div class='row'>
  <div class='c1'>this is a very long test test bc a</div>
  <div class='c2'>bob</div>
</div>


<div class='row'>
  <div class='c1'>this is a very long test test test test test</div>
  <div class='c2'>bob</div>
</div>

CSS

.row .c1 {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  z-index: 1;
  background-color: red;
}

.row .c2 {
  float: right;
  background-color: green;
}

.row {
  width: 200px;
  position: relative;
}

.row:after {
  clear: both;
  content: "";
  display: table;
}

笔

http://codepen.io/SamSaffron/pen/JtDHb

是否存在某种奇特的CSS（或HTML5结构），只要c2中的文字开始重叠，就会导致c1隐藏自身？

除此之外，实现这一目标的最佳JavaScript攻击是什么？

Answer 1

EDIT2：根据评论的建议，将隐藏机制更改为visibility:hidden。

这是使用jQuery的解决方案。我也在研究纯JS解决方案。应该采用相同的逻辑。

CodePen based on yours.

基本上，如果c1加上c2的宽度大于row的宽度，请隐藏c2。 我在overflow:hidden的CSS中添加了c2，并使用.width(0)隐藏了它，因为您的c1有position:absolute，因此取决于{ {1}}提供行的高度。

希望这就是你所需要的。

编辑：这是纯JavaScript中的相同解决方案。这假定每个c2都有row和c1。

CodePen

Answer 2

是的，您可以尝试使用相同的HTML，只使用此CSS：

.row .c1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 170px;
    max-width: 170px;
    z-index: 1;
    background-color: red;
    display:table-cell;
    padding: 0px 5px;
}
.row .c2 {
    position:absolute;
    top:0;
    right:-15px
    /* half of the width */
    ;
    background-color: green;
    display:table-cell;
    width:30px;
}
.row {
    display:table;
    width: 200px;
    position: relative;
}

See fiddle here

Answer 3

我用jquery来解决这个问题...

$('.row').each(function(){
    if($(this).find('.c1').width()+$(this).find('.c2').width()>$(this).width())
    {
        $(this).find('.c2').css({display:'none'});
        $(this).find('.c1').css({position:'relative'});
    }
  });  

==＆GT;这将自动采用.row宽度，.c2宽度n .c1宽度，因为内容可能会有所不同

jsfiddle