html - : hidden 如何定义父DIV溢出时先折叠哪个SPAN

Question

我遇到过以下期望:有一个导航栏(固定高度的div)，它有一个按钮(封装在一个div中)在左边(float: left)，两个在右边(float:右)和左边中间区域的标题+版本，左对齐(跨度+跨度)。

我需要以某种方式指定，当用户重新调整窗口大小时，首先将第一个跨度“折叠”并应用文本溢出:省略号属性，当它完全消失时，第二个跨度逐渐消失好吧。

我不知道如何实现这一点，所以我会自动感谢任何帮助!

.middle {
  overflow: hidden;
  text-overflow: ellipsis;
}

#title {
  ???
}

#version {
  ???
}

<div class="container">
  <div id="button1" class="pull-left">...</div>
  <div id="button3" class="pull-right">...</div>
  <div id="button2" class="pull-right">...</div>
  <div id="middle-area" class="middle">
    <span id="title">very long title overflow should apply first</span>
    <span id="version">version 1</span>
  </div>
</div>

干杯

Answer 1

您应该通过使用 .resize() 用 jQuery 做到这一点 https://api.jquery.com/resize/

类似的东西:

  $( window ).resize(function() {
        $( "#title" ).animate({
           height: "0px"
        }, 1500, function() {

             $( "#version" ).animate({
               height: "0px"
             }, 1500 );
        });

    });