javascript - Hide partially obscured element using CSS - Stack Overflow

admin管理员组

文章数量:1421009

Given:

<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;
}

Pen:

Is there some sort of fancy CSS (or HTML5 structure) that can cause c2 to hide itself as soon as the text in c1 starts overlapping?

Barring that, what is the best performing JavaScript hack to achieve this?

Given:

<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;
}

Pen:

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

Is there some sort of fancy CSS (or HTML5 structure) that can cause c2 to hide itself as soon as the text in c1 starts overlapping?

Barring that, what is the best performing JavaScript hack to achieve this?

• javascript
• html
• css

Share Improve this question Follow edited Sep 1, 2014 at 0:08 Sam Saffron asked Aug 31, 2014 at 23:38 Sam SaffronSam Saffron 131k8181 gold badges333333 silver badges511511 bronze badges 4

• 3 Looks like you can hack it with flex box if the rows are a consistent (predetermined) height, but that seems pretty inflexible... (no pun intended) – Tim Stone Commented Sep 1, 2014 at 1:31
• Iterating over the .c1 elements and checking if they overlap the .c2 siblings is easy enough, but I'm not sure about the best perf approach there. – Tim Stone Commented Sep 1, 2014 at 1:34
• I think flex is actually a fine solution here, impressive – Sam Saffron Commented Sep 1, 2014 at 4:24
• I wasn't positive if it would hold up in your real use case. Proper support also only landed in IE 11, not sure if that's an issue. – Tim Stone Commented Sep 1, 2014 at 4:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

EDIT2: Changed the hiding mechanism to visibility:hidden, as per suggested by ments.

Here's a solution using jQuery. I'm working on a pure JS solution as well. The same logic should apply.

CodePen based on yours.

Basically if the width of c1 plus c2 is greater than the width of the row, hide c2. I added an overflow:hidden to the CSS for c2, and used .width(0) to hide it, since your c1 has position:absolute and so depends on c2 to provide the height for the row.

Hope that's what you needed.

EDIT: Here's the same solution in pure JavaScript. This assumes that every row has a c1 and a c2.

CodePen

yes, you can try using the same HTML you have, only with this 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

I used jquery to solve this problem...

$('.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'});
    }
  });  

==> this will automatically takes your .row width , .c2 width n .c1 width as the content may vary

jsfiddle

本文标签： javascriptHide partially obscured element using CSSStack Overflow