主页 / 问题 / 1058997
Accepted
Дмитрий Полянин
Asked:2020-12-15 23:16:04 +0000 UTC2020-12-15 23:16:04 +0000 UTC

如何在多行列表中隐藏极端分隔符

  • 772

有一个元素列表，可以是多行的。例子：

.container {
  width: 440px;
  text-align: center;
}

.item {
  display: inline-block;
  background-color: #ffd473;
  border-radius: 4px;
  padding: 5px;
  margin: 3px;
  font-weight: bold;
}

.sep {
  margin: 0 10px;
}
<div class="container">
  <span class="item">MenuItem1</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Item2</span>
  <span class="sep"> ❤️ </span>
  <span class="item">SomeText</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Hi all</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem5</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem6</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem very long text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More else text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">item10</span>
</div>

有必要隐藏sep极端的分隔符。我有 在此处输入图像描述

对任何 css 或 js 解决方案都满意。事先不知道菜单项的大小和数量。也就是说，该解决方案应该适用于任何菜单项和任何容器大小。

javascript

4 个回答

  1. Best Answer

    var spans = document.querySelectorAll(".container span");

spans.forEach((span, i) => {
  if (!span.classList.contains("sep")) return;
  var currentSpanL = span.getBoundingClientRect().left;
  if (
    !spans[i + 1] ||
    !spans[i - 1] ||
    currentSpanL > spans[i + 1].getBoundingClientRect().left ||
    currentSpanL < spans[i - 1].getBoundingClientRect().left
  ) {
   // span.parentNode.replaceChild(document.createElement('br'), span);
   span.style.visibility = 'hidden';
  }
});
    .container {
  width: 440px;
  text-align: center;
}

.item {
  display: inline-block;
  background-color: #ffd473;
  border-radius: 4px;
  padding: 5px;
  margin: 3px;
  font-weight: bold;
}

.sep {
  margin: 0 10px;
}
    <div class="container">
  <span class="item">MenuItem1</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Item2</span>
  <span class="sep"> ❤️ </span>
  <span class="item">SomeText</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Hi all</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem5</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem6</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem very long text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More else text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">item10</span>
</div>

    • 3

  2. 一个愚蠢但通用的解决方案（除非单个内联元素的高度差异无法通过阈值补偿threshold）：

    removeEdgeDelimiters('.container', '.sep'); 

function removeEdgeDelimiters(srcSelector, delimSelector, threshold = 0) {
  const srcEl = document.querySelector(srcSelector); 
  if (!srcEl) return null; 
  const copy = srcEl.cloneNode(); 
  copy.classList.add('hidden-copy'); 
  srcEl.insertAdjacentElement('afterend', copy); 
  copy.innerHTML = ''; 
  const lastDelimSel = delimSelector + ':nth-last-child(-n+3)'; 
  let prevH = 0; 
  for (const child of srcEl.children) {
    copy.appendChild(child.cloneNode(true)); 
    if (copy.scrollHeight - prevH > threshold) {
      const lastDelim = copy.querySelector(lastDelimSel); 
      lastDelim && lastDelim.replaceWith(document.createElement('br')); 
    } 
    prevH = copy.scrollHeight; 
  }
  srcEl.replaceWith(copy); 
  copy.classList.remove('hidden-copy'); 
  return copy; 
}
    .container { width: 440px; text-align: center; }

.item {
  display: inline-block;
  margin: 3px; padding: 5px;
  border-radius: 4px;
  font-weight: bold;
  background-color: #ffd473; }

.sep { margin: 0 10px; }
.hidden-copy { position: absolute; left: -200vw; }
    <div class="container">
  <span class="item">MenuItem1</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Item2</span>
  <span class="sep"> ❤️ </span>
  <span class="item">SomeText</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Hi all</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem5</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem6</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem very long text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More else text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">item10</span>
</div>

    • 2

  3. 通过添加右边距检查改进了 @hu-fo-of-ex 变体。因为在左边缘的情况下，没有出现分隔符最初不是落在行尾而是落在开头的情况。

    const spans = document.querySelectorAll(".container span");

spans.forEach((span, i) => {
  if (!span.classList.contains("sep"))
    return;

  if (!spans[i + 1] || !spans[i - 1])
    return;

  const currentSpanL = span.getBoundingClientRect().left;
  const currentSpanR = span.getBoundingClientRect().right;

  if (
    currentSpanL > spans[i + 1].getBoundingClientRect().left ||
    currentSpanR < spans[i - 1].getBoundingClientRect().right
  ) {
    span.parentNode.replaceChild(document.createElement('br'), span);
  }
});
    .container {
  width: 370px;
  text-align: center;
}

.item {
  display: inline-block;
  background-color: #ffd473;
  border-radius: 4px;
  padding: 5px;
  margin: 3px;
  font-weight: bold;
}

.sep {
  margin: 0 10px;
}
    <div class="container">
  <span class="item">MenuItem1</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Item2</span>
  <span class="sep"> ❤️ </span>
  <span class="item">SomeText</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Hi all</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem5</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem6</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem very long text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More else text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">item10</span>
</div>

    • 2 

  4. let items = document.querySelectorAll(".item");

for(let i = 0, max = items.length; i < max; i++) {
  if(i+1 < max && 
  items[i].getBoundingClientRect().left > items[i+1].getBoundingClientRect().left) {
    items[i].parentNode.replaceChild(document.createElement('br'), items[i].nextElementSibling);
  }
}
    .container {
  width: 440px;
  text-align: center;
}

.item {
  display: inline-block;
  background-color: #ffd473;
  border-radius: 4px;
  padding: 5px;
  margin: 3px;
  font-weight: bold;
}

.sep {
  margin: 0 10px;
}
    <div class="container">
  <span class="item">MenuItem1</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Item2</span>
  <span class="sep"> ❤️ </span>
  <span class="item">SomeText</span>
  <span class="sep"> ❤️ </span>
  <span class="item">Hi all</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem5</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem6</span>
  <span class="sep"> ❤️ </span>
  <span class="item">MenuItem very long text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">More else text</span>
  <span class="sep"> ❤️ </span>
  <span class="item">item10</span>
</div>

    • 1

相关问题