html - 检测旁边有右对齐元素的溢出

Question

我有一个带有右对齐向下箭头的表格标题，以指示表格何时按该列排序。这些列可以调整大小，如果标题溢出并因此被 ... 截断，我需要在鼠标悬停时显示工具提示。但是，我不知道如何在这种情况下正确检测溢出。我尝试了两种方法:将箭头向右浮动并使用 flexbox 定位。

Here's a fiddle with both methods.

该 fiddle 中的第 2 列有一个向右浮动的箭头，第 3 列使用 flex。问题:

• 使用 float 不会导致 offsetWidth 和 scrollWidth 之间的差异，直到列太窄以至于溢出超出 float 元素。您可以通过将 #col-2 的宽度更改为 60px 来在 fiddle 中看到这一点。文本被适当截断，但不能可靠地使用这些宽度。
• 使用 flex，无论列宽如何，offsetWidth 和 scrollWidth 始终相同。文本被 ... 正确截断，但这两个属性永远不会不同。

如何使用该示例中给出的布局正确检测溢出？ 我不想要任何涉及克隆元素的方法。我的样式表太复杂，该方法无法工作，而且它的性能也很糟糕。

fiddle 的代码就在下面，所以它也包含在这个问题中。

document.querySelectorAll('span.ellipsis-overflow').forEach((el) => {
  if (el.offsetWidth < el.scrollWidth) {
    el.style.color = 'red';
  }
});

#col-2 {
  width: 80px; /* set to 60px to trigger overflow detection */
}

#col-3 {
  width: 80px;
}

.float i {
  float: right;
}

span.flex-container {
  display: flex;
  flex-direction: row;
}

span.flex-container i {
  margin-left: auto;
}

.ellipsis-overflow {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-overflow * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* below this is just style stuff to make the problem easier to see */

table {
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
  width: 400px;
}

th {
  border: 1px solid black;
}

i.material-icons {
  font-size: 16px !important;
  display: inline-flex;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<p>Column text will be red if <code>offsetWidth</code> is less than
<code>scrollWidth</code>, indicating overflow. Trigger this in column 2 by setting
its width to 60px.</p>

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th id="col-2" class="float">
        <span class="ellipsis-overflow">
          <i class="material-icons">arrow_downward</i>
          Column 2
        </span>
      </th>
      <th id="col-3">
        <span class="ellipsis-overflow">
          <span class="flex-container">
            <span>Column 3</span>
            <i class="material-icons">arrow_downward</i>
          </span>
        </span>
      </th>
    </tr>
  </thead>
</table>

Answer 1

原始答案

您可以在条件前设置overflow: auto，在条件后设置回hidden。 :)

请参阅下面的代码段(我已将 col-2 宽度设置为 60px):

document.querySelectorAll('span.ellipsis-overflow').forEach((el) => {
  el.style.overflow = "auto";
  if (el.offsetWidth < el.scrollWidth) {
    el.style.color = 'red';
  }
  el.style.overflow = "hidden";
});

#col-2 {
  width: 60px; /* set to 60px to trigger overflow detection */
}

#col-3 {
  width: 80px;
}

.float i {
  float: right;
}

span.flex-container {
  display: flex;
  flex-direction: row;
}

span.flex-container i {
  margin-left: auto;
}

.ellipsis-overflow {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-overflow * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* below this is just style stuff to make the problem easier to see */

table {
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
  width: 400px;
}

th {
  border: 1px solid black;
}

i.material-icons {
  font-size: 16px !important;
  display: inline-flex;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<p>Column text will be red if <code>offsetWidth</code> is less than
<code>scrollWidth</code>, indicating overflow. Trigger this in column 2 by setting
its width to 60px.</p>

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th id="col-2" class="float">
        <span class="ellipsis-overflow">
          <i class="material-icons">arrow_downward</i>
          Column 2
        </span>
      </th>
      <th id="col-3">
        <span class="ellipsis-overflow">
          <span class="flex-container">
            <span>Column 3</span>
            <i class="material-icons">arrow_downward</i>
          </span>
        </span>
      </th>
    </tr>
  </thead>
</table>

更新的答案

我认为您可以对父级 Height 进行相同的检查。

请参阅下面的代码段:

document.querySelectorAll('span.ellipsis-overflow').forEach((el) => {
	var initialHeight = el.parentElement.clientHeight;
	el.classList.add("letMeCheckWidth");
	if (initialHeight  < el.parentElement.clientHeight) {
  	el.style.color = 'red';
  }
	el.classList.remove("letMeCheckWidth");
});

#col-2 {
  width: 80px; /* set to 60px to trigger overflow detection */
}

#col-3 {
  width: 80px;
}

.float i {
  float: right;
}

span.flex-container {
  display: flex;
  flex-direction: row;
}

span.flex-container i {
  margin-left: auto;
}

.ellipsis-overflow {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-overflow * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ellipsis-overflow.letMeCheckWidth {
  display: block;
  overflow: auto;
  text-overflow: inherit;
  white-space: normal;
}

.ellipsis-overflow.letMeCheckWidth * {
  overflow: auto;
  text-overflow: inherit;
  white-space: normal;
}

/* below this is just style stuff to make the problem easier to see */

table {
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
  width: 400px;
}

th {
  border: 1px solid black;
}

i.material-icons {
  font-size: 16px !important;
  display: inline-flex;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<p>Column text will be red if <code>offsetWidth</code> is less than <code>scrollWidth</code>, indicating overflow. Trigger this in column 2 by setting its width to 60px.</p>

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th id="col-2" class="float">
        <span class="ellipsis-overflow">
          <i class="material-icons">arrow_downward</i>
          Column 2
        </span>
      </th>
      <th id="col-3">
        <span class="ellipsis-overflow">
          <span class="flex-container">
            <span>Column 3</span>
            <i class="material-icons">arrow_downward</i>
          </span>
        </span>
      </th>
    </tr>
  </thead>
</table>

您可以在 jsfiddle 上进行测试还有..