Попытка превратить длинный заголовок в эллипсис на отзывчивый дизайн

Я разрабатываю отзывчивое веб-приложение, и я хотел бы инкапсулировать длинный текст в заголовке с помощью многоточия. Как я могу это сделать? Это отзывчивая страница (без фиксированной ширины)...

Вот пример

Example of what I'd like to achieve

Может ли кто-нибудь помочь?

Edit:

Я добавил максимальную ширину и переполнение многоточия следующим образом:

max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Но это не сработает для меня, потому что ключ здесь - отзывчивость. Я не нацелен на максимальную ширину заголовка специально для мобильных браузеров iOS, я хочу, чтобы максимальная ширина увеличивалась или уменьшалась на всех смартфонах. Любые предложения?

Ответы

Ответ 1

Кто знал, что вы можете справиться с этим в прямом CSS? Я был удивлен, но проверьте свойство text-overflow. Одним из возможных значений является многоточие! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Смотрите скрипту: http://jsfiddle.net/PdRqB/

Вам нужно добавить три свойства в заголовок:

.title {
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
    text-overflow: ellipsis; /* to do what you want. */
}

Одна классная часть - никакие медиа-запросы не нужны. Он уже реагирует (попробуйте изменить размер панели в скрипке).

Update:

Просто посмотрел ваше обновление... Ваша ширина элемента может быть установлена ​​в процентах, даже на 100%. Затем overflow: hidden и white-space: nowrap могут делать свою магию на дочернем элементе title.