根据高度隐藏溢出元素

Question

I'm writing (using pure JavaScript = no JQuery) a custom control which is a container that collapses it's contents when they span multiple lines and show only the first one. 我正在编写（使用纯JavaScript =无JQuery）一个自定义控件，它是一个容器，当它们跨越多行并且仅显示第一行时，它会折叠它的内容。 When you click a button in the control (down arrow), the container expands all of it's content. 当您单击控件中的按钮（向下箭头）时，容器将展开其所有内容。 If content spans only 1 line, I don't show the button at all and it behaves as a regular container. 如果内容只跨越1行，我根本不显示该按钮，它表现为常规容器。

The 2 pictures below show the control collapsed (upper one) and expanded (bottom one). 下面的两张图片显示控件折叠（上面一个）和展开（底面一个）。

控制崩溃了

控制扩大了

The problem I face is how do I know when to show the button and when not = how to detect if content is multiline or spans only a single line. 我面临的问题是如何知道何时显示按钮以及何时不知道=如何检测内容是多行还是仅跨越一行。 My approach would be getting the height of the element, then collapsing it and seeing if the height changed (if it did, then it must be multiline). 我的方法是获得元素的高度，然后折叠它并查看高度是否改变（如果它改变了，那么它必须是多线的）。

The problem with that approach is inside my function createCollapsingPanel() the element I'm creating hasn't been yet appended to the DOM - the function returns the element, which will only then be appended to DOM (illustrated by Architecture 1 below). 该方法的问题在于我的函数createCollapsingPanel()我正在创建的元素尚未附加到DOM - 该函数返回该元素，该元素将仅附加到DOM（由下面的体系结构1说明）。 If that would concern only that 1 function, I could of course move appending inside the function ( Architecture 2 below). 如果那只涉及1个函数，我当然可以在函数内部追加（下面的架构2 ）。 Unfortunately that is the way I wrote all of my functions (they return elements, which are only then appended into parent elements in the outer functions that called them) and so that would mean re-writing other parent functions that in the end call this one, in general my whole architecture of functions. 不幸的是，这就是我编写所有函数的方式（它们返回的元素只会附加到调用它们的外部函数中的父元素中），这意味着重写其他父函数，最后调用这个函数，一般来说，我的整个功能架构。

Architecture 1 建筑1

function createOuterElement() {
  var outerElement = document.createElement(...);

  outerElement.appendChild(createInnerElement());
  /* Do other things with outerElement */

  return outerElement;
}

function createInnerElement() {
  var innerElement = document.createElement(...);

  /* Do things with innerElement */

  return innerElement;
}

Architecture 2 建筑2

function createOuterElement(parentElement) {
  var outerElement = document.createElement(...);

  parentElement.appendChild(outerElement);
  createInnerElement(outerElement);
  /* Do other things with outerElement */
}

function createInnerElement(parentElement) {
  var innerElement = document.createElement(...);

  parentElement.appendChild(innerElement);
  /* Do other things with innerElement */
}

Main Question 主要问题

Any ideas on how to deal with that in my current architecture ( Architecture 1 )? 关于如何在我当前的架构（ 架构1 ）中处理它的任何想法？ Maybe there's an event I could attatch to the control element and it would get invoked after the element is inserted into DOM and browser styles are calculated for it? 也许有一个事件我可以附加到控件元素，它会在元素插入DOM后调用，并为它计算浏览器样式？

Additional Question 附加问题

Is writing functions in Architecture 1 considered a bad practice? 在架构1中编写函数是否被视为不良做法？ I'm pretty new to non-basic JavaScript, so am unsure what good practices are. 我对非基本JavaScript很新，所以我不确定什么是好的做法。

Answer 1

you could always have the inner container be multiline and just clip it with the outer container. 您可以始终将内部容器设置为多行，并将其与外部容器一起剪切。

on the outer container use: 在外容器上使用：

overflow: hidden
height: somevalue height: 某些价值

on the inner container use: 在内部容器上使用：

position: absolute
height: auto

put the span 's inside the inner container. 将span放在内部容器内。

you can now measure the inner containers height independently from the outer ones. 您现在可以独立于外部容器测量内部容器高度。

Answer 2

you can use a hidden container in the dom to measure element sizes. 您可以在dom中使用隐藏容器来测量元素大小。 the hidden container can be a simple div in the dom like: 隐藏的容器可以是dom中的简单div：

   ...
   <body>
      <div id="measurementContainer" style="display:none;"></div>

a measuring function could than: 测量功能可以：

append the element to the measurement container ( div ) 将元素附加到测量容器（ div ）
measure the element 测量元素
and remove it from the measurement container again 然后再将其从测量容器中取出

for example: 例如：

    function measureElementWidth(element) {
       var measurementContainer = document.getElementById(measurementContainer);
       measurementContainer.appendChild(element);

       var width = element.clientWidth;

       measurementContainer.removeChild(element);

       return width;
}

alternatively you can use MutationObservers and get notified if an element is added to the dom. 或者，您可以使用MutationObservers，并在元素添加到dom时收到通知。 check if all needed browsers support this. 检查是否所有需要的浏览器都支持此

or even simpler: just call your sizing function after you append your elements to the dom. 甚至更简单：只需在将元素追加到dom后调用大小调整函数。

根据高度隐藏溢出元素

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-06-10 16:43:10

解决方案2
1 2015-06-10 16:08:17

根据高度隐藏溢出元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-06-10 16:43:10

解决方案2 1 2015-06-10 16:08:17

解决方案1
2 已采纳 2015-06-10 16:43:10

解决方案2
1 2015-06-10 16:08:17