Question

我想检查<div>是否有溢出并显示链接（如果有）。我有三个同类的div。我想检查每个div是否溢出并显示或隐藏链接。这是我的HTML：

<div id="tab-1" class="tab-panel active" >
  <div>
    LETO 2015: ALNJA
    <br>
    <br>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>
<div id="tab-2" class="tab-panel">
  <div>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>
<div id="tab-3" class="tab-panel">
  <div>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>`

的CSS：

  .tab-panel {
   position:relative;
   background-color: #f8f8f8;
   color: #000;
   height: 276px;
   line-height: 20px;
   padding:20px;
  }
 .tab-panel div {overflow: hidden;height: 100%;}

Answer 1

EDIT: I made several updates to this answer. The original one didn't meet the needs of the OP because not all the div elements where visible at the same time (see comments). I will first answer the general question: "how to check if a div is overflowed?" and then address the OP problem.

NOTE: I have modified the original html and css to make the example clear.

So we have a container (a div element) that we call 'tab'. It has other div inside that we call 'content'. If 'content' is bigger than 'tab', then 'tab' is overflowed.

The key is to compare scrollHeight and clientHeight attributes of 'content'.

If scrollHeight is bigger than clientHeight, we change the display property of the link to make it visible. We use the id selector to identify 'content'.

HTML:

<div id="tab"> <div id="content">...</div> </div>

JS:

if ($('#content').prop('scrollHeight') > $('#content').prop('clientHeight'))
    //if 'true', the content overflows the tab: we show the hidden link
    $('#myLink').css('display', 'block');
}

What happens if we have more than one 'tab'?

In that case we need to use the each function to wrap the code above and iterate the different 'tabs':

HTML:

<div class="tab"> <div class="content">...</div> </div>
<div class="tab"> <div class="content">...</div> </div>
...

JS:

$('.tab').each( function() {
    if ($('.content', this).prop('scrollHeight') > $('.content', this).prop('clientHeight'))
    $('a', this).css('display', 'block');
});

Note how we use now class selectors and we search the elements in the context of this.

Adressing the OP problem

In this case, just one of the 'tabs' is visible, while the others are hidden until the user raise a event that changes the visibility.

We can not compare the scrollHeight and clientHeight attributes of a hidden element (both will return 0). So we need to make the comparison in the handler of the event that make it visible.

The following snippet manage that situation.

function updateTabs()
{
  $('.tab-panel').each( function() {
    if ($('div', this).prop('scrollHeight') > $('div', this).prop('clientHeight'))
      $('a', this).css('display', 'block');
  });
}

$('span').click( function() {
  $('.tab-panel').removeClass('active');
  $('#'+$(this).data('tab')).addClass('active');
  updateTabs();
});

updateTabs();

span {
  border: 1px solid blue;
  padding: 3px;
}

.tab-panel {
  background-color: #eee;
  height: 76px;
  padding: 30px;
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-panel div {
  overflow: hidden;
  height: 100%;
  border: 1px solid red;
}

.show-more {
  display: none;
  margin: 5px;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span data-tab="tab-1">Tab 1</span>
<span data-tab="tab-2">Tab 2</span>
<span data-tab="tab-3">Tab 3</span>
<hr>

<div id="tab-1" class="tab-panel active">
  <div>
    I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>
  </div>
  <a class="show-more">more</a>
</div>

<div id="tab-2" class="tab-panel">
  <div>
    I have little text.
    <br>
  </div>
  <a class="show-more">more</a>
</div>

<div id="tab-3" class="tab-panel">
  <div>
    I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>
  </div>
  <a class="show-more">more</a>
</div>

Also, please note that one issue with your code is that all the links have the same id, morelink should be a class (or have different names).

检查div是否溢出

1 个答案:

What happens if we have more than one 'tab'?

Adressing the OP problem