Принудительное обновление расчета счетчика CSS

Я интегрирую редактор Quill в наше приложение, и меня попросили реализовать нумерацию строк в блоках кода. Следуя этому обсуждению, я использовал

.ql-code-block-container {
    counter-reset: line;
    padding-left: 0;
}

.ql-code-block:before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    border-right: 1px solid #ddd;
    padding: 0 .5em;
    margin-right: .5em;
    color: #EEE;
}

Это работает хорошо, но есть одна проблема в Chrome. Я могу добавить текст, который отображается в Dev-tools как:

<div class = "ql-code-block-container" spellcheck = "false">
    <div class = "ql-code-block">Here</div>
    <div class = "ql-code-block">is</div>
    <div class = "ql-code-block">some</div>
    <div class = "ql-code-block">text</div>
</div>

и Crome отображается как

Но если я выделю и удалю две средние строки, Dev-tools покажет

<div class = "ql-code-block-container" spellcheck = "false">
    <div class = "ql-code-block">Here</div>
    <div class = "ql-code-block">text</div>
</div>

в то время как Chrome отображает его как

Если я добавлю новую строку текста, счетчики, похоже, пересчитаются правильно. Я подозреваю, что это ошибка Chrome (в FireFox она отлично обновляется), но есть ли какой-нибудь общий способ заставить браузер обновлять расчеты счетчиков CSS при изменении контента?

css google-chrome quill

24.06.2024 11:05

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать переключить counterReset в javascript, чтобы заставить Chrome обновиться. Взгляните на этот пример:

function remove() {
  console.info("remove")
  var els = document.getElementsByClassName("ql-code-block");
  removeCodeBlocElement(els[1])
}


function removeCodeBlocElement(element) {
  var elementContainer = element.closest(".ql-code-block-container");
  element.remove();
  elementContainer.style.counterReset = "none"
  //using setTimeout to disable browser property optimisation
  setTimeout(() => { 
  elementContainer.style.counterReset = "";
  }, 0);
}

.ql-code-block-container {
  counter-reset: line;
  padding-left: 0;
}

.ql-code-block:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
}

<div class = "ql-code-block-container" spellcheck = "false">
  <div class = "ql-code-block">Here</div>
  <div class = "ql-code-block" id = "remove">is</div>
  <div class = "ql-code-block">some</div>
  <div class = "ql-code-block">text</div>
</div>

<button onclick = "remove()">Remove</button>

Обновлено: если у вас есть какие-либо события на вашем ql-code-block, вы также можете использовать внутренний HTML и избежать возможного мерцающего номера счетчика.

function remove() {
  var elements = document.getElementsByClassName("ql-code-block");
  var element = elements[1];
  var elementContainer = element.closest(".ql-code-block-container"); 
  element.remove();
  //using innerHTML removes all events from child elements
  elementContainer.innerHTML = elementContainer.innerHTML;
}

.ql-code-block-container {
  counter-reset: line;
  padding-left: 0;
}

.ql-code-block:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
}

<div class = "ql-code-block-container" spellcheck = "false">
  <div class = "ql-code-block">Here</div>
  <div class = "ql-code-block" id = "remove">is</div>
  <div class = "ql-code-block">some</div>
  <div class = "ql-code-block">text</div>
</div>

<button onclick = "remove()">Remove using InnerHTML</button>

24.06.2024 12:08

Другие вопросы по теме

Использование tesseract.js с манифестом v3

Проблема с размытием фона в Chrome

Alpine.js: ошибка «фрукт не определен» при использовании директивы x-sort в режиме устройства Chrome Dev Tools

Почему PWA на основе реагирования, размещенное в моей службе приложений Azure, случайно начинает возвращать ошибку 500 для ВСЕХ вызовов POST (GET работает нормально)? Исправлено: Перезапустить браузер?

Отладчик VS Code Chrome не открывает окно до завершения предзапуска в проекте Angular

Как предотвратить «Проверить сохраненные пароли» и «Сохранить пароль?» всплывающие диалоговые окна в Chrome во время теста TestCafe?

Android-приложение Unity аварийно завершает работу при установке из Google Play Store

Chromedriver не отображает данные веб-скрапа

Расшифровать и повторно зашифровать файлы cookie Chrome

Chrome/MacOS и Firefox/MacOS могут отображать строку с глифами из двух шрифтов, но Chrome/iOS и Safari/Any — нет

Принудительное обновление расчета счетчика CSS

Ответы 1

Другие вопросы по теме

Похожие вопросы