Значение многоточия '...' имеет неправильный цвет

#html #css

#HTML #css

Вопрос:

У меня есть таблица с 3 точками ‘…’ в конце каждой строки, когда это необходимо (переполнение текста). Я использовал значение многоточия свойства text-overflow. Это работает: при изменении размера окна отображаются ‘…’, но у меня возникают 2 проблемы, когда строка в моей таблице содержит интервал:

‘…’ окрашены в цвет шрифта интервала
размер ‘…’ изменен на размер шрифта интервала

Смотрите демонстрацию здесь:http://jsfiddle.net/Ah4DR/1 /

Возможно, это вопрос новичка, но я некоторое время искал и не нашел никакого решения.

Я забыл сказать, что это не работает в Internet Explorer, но отлично работает в Chrome.

Спасибо!

1. в каком браузере это указано? В Chrome выглядит нормально.

2. «Отлично работает в FF8». Обязательно укажите, какие браузеры затронуты!

3. @bozdoz, pst: Извините, я забыл упомянуть о проблеме, возникшей в Internet Explorer!

4. @Bronzato «Отлично работает в IE9». Будьте более конкретными 🙂

5. pst: в IE9, когда я перехожу к jsfiddle.net/Ah4DR/1 и я уменьшаю размер окна, я вижу, что вторая строка таблицы с ‘…’ окрашена в желтый цвет. Это моя проблема. Мне это нужно… окрашено в черный.

Ответ №1:

У меня была та же проблема; в то время как мой текст был белым на темно-сером, цвет многоточия казался черным. Я решил это, просто установив цвет того, который содержал текст-переполнение: многоточие, вот так:

 .ellipsis-div {
    white-space: nowrap;
    width: 154px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;       /* --> ellipsis color */
}

Ответ №2:

Это, безусловно, похоже на ошибку в IE. Для определения цвета многоточия (по какой-либо причине) считывается цвет первого элемента (или, возможно, это первое содержимое). Тем не менее, я нашел «обходной путь» для ошибки. Я бы рекомендовал, если возможно, каким-то образом настроить это так, чтобы оно предназначалось только для IE (и только для td элементов, которые вы используете text-overflow ), но в качестве доказательства концепции это исправляет это:

 td:before {content: ''; color: black;}

Очевидно, что первое td содержимое, определяющее цвет, необязательно должно быть реальным содержимым, потому что псевдоконтент сработал.