#css
#css
Вопрос:
TL; DR: Я ищу способ отображения элемента SPAN, который может обеспечить желаемое поведение, показанное на 1-м и 3-м рисунках ниже.
Интерактивный код:http://jsfiddle.net/53GZe/1 /
При выборе текста из текстового блока отображение должно быть встроенным, чтобы не создавались разрывы.
Теперь, когда я пытаюсь выбрать несколько элементов с одинаковым отображением: inline: я получаю это:
Поскольку дисплей настроен на встроенный, он не знает, какой ширины сделать <span> (элемент, вставленный вокруг выделения, чтобы придать пользовательский эффект выделения)
Итак, в другом случае, когда я устанавливаю отображение в ячейку таблицы, я получаю это поведение:
Что замечательно и вроде как аккуратно. За исключением этого, он не работает со встроенным блоком текста, как в моем первом примере:
(обратите внимание на разрывы до и после выбора)
Ответ №1:
Не могли бы вы использовать jQuery для поиска дочерних элементов выделенного div. Затем, если есть какие-либо заблокированные элементы или разрывы строк, установите для display свойства значение table-cell.
Или установив новое правило CSS для ситуации, возможно, снова, используя jQuery для проверки внутренних элементов?
.situation1 .highlighted { display:table-cell; }
.situation2 .highlighted { display:inline; }
Комментарии:
1. Это то, чего я боялся. К сожалению, из-за того, что выделенный элемент генерируется с помощью javascript, это потребует немного больше работы, чем добавление другого правила CSS. хотя спасибо!
2. Эй, я только что прочитал полный вопрос и понял, что это не совсем то, что вам было нужно. Я обновил ответ (и, вероятно, продолжу, когда придумаю больше идей; D)
3. ваше предложение jQuery было бы тем, что я сделаю, если я реализую это прямо сейчас. = D