Как вы оформляете текст, который переполняет?

Question

У меня есть неупорядоченный список в формате столбца, который заполняется динамически, обычно только одним или двумя словами в <li>, но иногда появляется более длинный элемент списка. Чтобы сохранить свои столбцы, я решил скрыть лишний текст этих более длинных элементов с помощью многоточия:

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Но я все еще хочу предоставить пользователю доступ к этим элементам, поэтому я создал стиль наведения так:

li:hover {
  overflow: visible;
}

Это показывает текст в пространство между столбцами, но останавливается, когда он достигает соседнего <li>, Я хочу отдать приоритет <li> он находится над остальными и имеет непрозрачный фон. Играя с z-index не сделал трюк.

Вот скрипка: https://jsfiddle.net/9p7qeon2/

Answer 1

То, как я это сделал, - это добавление диапазона в LI, а затем при наведении курсора становится position:absolute, При этом вы можете контролировать, как полный текст отображается и может быть стилизован. Единственным недостатком является то, что LI потребуется высота, чтобы не потерять свою высоту из-за того, что промежуток становится абсолютным. Проверьте скрипку

Answer 2

Казалось бы, проблема в том, что вы имеете фиксированную ширину столбцов. Пример: column-width: 200px Поскольку вы используете hover для дочернего элемента, вы не сможете изменить ширину родительского элемента, используя чистый CSS. Вы должны использовать JQuery или что-то .addClass к элементу UL (родительский), а затем использовать что-то вроде: ul.active { column-width: 300px; }, но это будет иметь нежелательные последствия для всех других элементов.

Вы обнаружите, что использование фиксированной ширины таким образом будет иметь много проблем в разных браузерах, например, ваша проблема несколько отличается в зависимости от того, какой браузер используется:

• Firefox отобразит полный текст, но не отобразит цвет фона.
• Chrome и MS Edge будут отображать цвет фона, но не полный текст... и, честно говоря, это правильно, потому что контейнер ограничен 200px, Я не верю, что браузеры поддерживают min-column-width, и мои тесты не решают проблему.

Вы можете использовать плавающие значения с фиксированным процентом, которые будут отображаться на больших экранах, а затем скрываться на меньших экранах. Посмотрите JSFiddle a made for you, очевидно, этот код нужно будет скорректировать в соответствии с вашими требованиями, но в правильном направлении.

Резюме... проблема в том, что в качестве ширины установлено 200px... чтобы переопределить эту ширину, которую вы должны использовать min-width, position: fixed или же position: absolute, Это все, что я могу думать прямо сейчас.