добавить elipsis в последней строке текста [дубликата]

Question

добавить elipsis в последней строке текста [дубликата]

0

Я хочу добавить elipsis на последней строке, мой markeup:

<h4 class="heading4 js-heading4">Yellow gold Yellow gold Yellow gold</h4>


.heading4 {
    height: 98px;
    position: relative;
    width: 200px;
    overflow: hidden;
    white-space: nowrap
}

Я хочу, чтобы мой результат был похож на желтое золото. Желтое золото. Желтый...

если текст переполнен. проблема в том, что я добавляю text-overflow:ellipsis тогда весь текст поступает в одну строку: Желтое золото Желтое золото Yell... Я хочу добавить многоточие в нижней части страницы.

supersaiyan 29 май 2014, в 07:26

Источник

0

У вас есть демо?
PeterKA 29 май 2014, в 05:03
1

извини, мне непонятно ...
Bhojendra Rauniyar 29 май 2014, в 05:09
0

Вы можете посмотреть в dotdotdot.jquery.
Mathew MacLean 29 май 2014, в 05:20
0

много ошибок заклинаний, таких как elipsis и oveflow в вашем вопросе.
Kheema Pandey 29 май 2014, в 05:54

Показать ещё 2 комментария

Теги:

jquery

css

css3

2 ответа

Ещё вопросы

много ошибок заклинаний, таких как elipsis и oveflow в вашем вопросе.

Abhitalks · Answer 1 · 2014-05-29T04-32-00.000Z

Со стандартным CSS, нет. Вы не можете.

Но есть нестандартные CSS-браузеры, которые делают это. например, браузеры на основе webkit поддерживают этот (особенно Chrome) с помощью -webkit-line-clamp:

Демо: http://jsfiddle.net/abhitalks/C34Gm/1/

Соответствующий CSS:

p {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

Примечание. Эти "Расширения Webkit" являются собственными свойствами webkit-prefixed. Не используйте на производственных веб-сайтах, по крайней мере, на данный момент.

Мне нужно это для мобильного браузера, так будет ли оно работать для мобильных устройств?
@SachinRawal: какой мобильный телефон и какой браузер? Как я уже сказал, это проприетарное расширение только для webkit . Работает на Safari на iOS. Это также будет работать на Chrome. Кроме того, тяжелая удача. Почему бы вам не попробовать использовать эту скрипку на своем мобильном телефоне.

Ankit Zalani · Answer 2 · 2014-05-29T02-46-00.000Z

Используйте этот плагин jquery для автоматического создания затмений в конце текста в соответствии с вашим требованием без повторного использования колеса:

http://dotdotdot.frebsite.nl/