1

Есть список элементов, который может быть многострочным. Пример:

.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. Размер и количество элементов меню заранне не известны. То есть решение должно работать при любых пунктах меню и любых размерах контейнера.

4
  • Нужно именно СПРЯТАТЬ ненужные, или можно показать только там где нужно? 15 дек 2019 в 16:31
  • @AndreyFedorov любым способом, спрятать, удалить, или вовсе не выводить. 15 дек 2019 в 16:41
  • Получите ширину блока, ширины каждого пункта меню и ширину сепараторов. Считайте где будут переносы. 15 дек 2019 в 16:45
  • @AndreyFedorov Это учебный вопрос. Я сам могу реализовать решение. А это 1. возможность поучиться и заработать балы для тех кто хочет. 2. реально интересный вопрос для StackOverflow. Поэтому пишем не идею алгоритма, а решение. 15 дек 2019 в 17:36

4 ответа 4

3

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>

11
  • Что-то тут недодумано. После 6 отсутствует сердечко - вот как у меня выглядит - yadi.sk/i/0Z6sJYMfudz9Fg 15 дек 2019 в 17:37
  • Остаться ведь должно шесть с таким размером контейнера.После шестого и перед пятым сердце убирается и на свободное место подтягивается длинный span.
    – user355286
    15 дек 2019 в 17:45
  • тут попросту неоткуда взяться между ними сердечку.
    – user355286
    15 дек 2019 в 17:47
  • Убираться должны только по краям. А все между остаться. 15 дек 2019 в 18:29
  • Замени display none на visibility hidden, тогда не будет смещаться 15 дек 2019 в 18:31
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

Доработал вариант @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>

1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.