Добавьте '.' (Точки) после текста, используя css

0

Я создал страницу ASP, в которой я показываю события. Я использовал css для отображения максимум 3 строк содержимого в одном шаблоне элемента.

Я хочу отобразить 3 периода после текста, т.е.:

Изображение 174551

Я искал через Интернет и нашел решение добавлять периоды после текста, используя .after{content:"..."} но точки помещаются в новую строку, но я хочу получить точный результат, как он есть на изображении.

Мой css:

        .eventDescription
        {
        height: 45px;
        margin-left: 65px;
        font-size: 15px;            
        line-height: 1.5em;
        overflow: hidden;
        text-align: justify;
        line-height: 15px;
        padding-top: 10px;
        width: 220px;            
        }  
  • 0
    Для многоточия есть некоторая поддержка в браузере (не такая, как у трех периодов): mattsnider.com/css-string-truncation-with-ellipsis
  • 1
    @TiesonT. Некоторые разработчики не используют многоточие, так как они уже ограничивают контент со стороны сервера, но чтобы указать, что контенту еще есть что читать, они предпочитают этот подход :)
Показать ещё 1 комментарий
Теги:
css-selectors

1 ответ

4

Использование :after псевдодальности с content

демонстрация


Вы можете контролировать расстояние между точками или размер, используя свойство font-size и letter-spacing соответственно.

Демонстрация 2


Приступая к синтаксису, вы используете .after{content:"..."} поэтому прежде всего вам нужно назначить класс этому элементу, поэтому он будет <p class="after"> а также вам нужно будет добавить :after псевдо в ваш .after класс

.after:after {
   content: "...";
}

Примечание. Использование :after, как контент будет inline по умолчанию, чтобы применять поля или прокладки, вам необходимо использовать inline-block; , более старые версии IE не будут уважать это свойство.

Для получения дополнительной информации о поддержке браузера :after

  • 0
    Спасибо, сэр, я изменил свой CSS, как это, но я получаю вывод, как это .
  • 0
    @RiyazKalva вы можете предоставить свой HTML?
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню