CSS: Как я могу установить элемент в одной ситуации, но быть табличной ячейкой в другой ситуации?

58
6

TL; DR: Я ищу способ отображения элемента SPAN, который может достичь желаемого поведения, показанного на 1-м и 3-м снимках ниже.

Интерактивный код: http://jsfiddle.net/53GZe/1/

При выборе текста из блока текста дисплей должен быть встроенным, чтобы не генерировались разрывы.

enter image description here

Теперь, когда я пытаюсь выбрать несколько элементов с одним и тем же дисплеем: inline: я получаю следующее:

enter image description here

Поскольку дисплей настроен на встроенный, он не знает, как широко сделать <span> (элемент, вставленный вокруг выделения, чтобы дать настраиваемый эффект выделения)

Итак, для другого случая, когда я устанавливаю отображение в ячейку таблицы, я получаю следующее:

enter image description here

Что замечательно, и что-то вроде аккуратного. Кроме того, он не работает с встроенным блоком текста, как в моем первом примере:

enter image description here

(обратите внимание на разрывы до и после выбора)

спросил(а) 2011-11-04T17:02:00+04:00 8 лет, 11 месяцев назад
1
Решение
81

Не могли бы вы использовать jQuery для поиска дочерних элементов выделенного div. Затем, если есть заблокированные элементы или разрывы строк, установите для свойства display значение table-cell.

Или, установив новое правило CSS для ситуации, возможно, снова, используя jQuery для проверки внутренних элементов?

.situation1 .highlighted { display:table-cell; }
.situation2 .highlighted { display:inline; }

ответил(а) 2011-11-04T17:06:00+04:00 8 лет, 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема