1

Тема: Обрізати текст і показати повний по наведенню

Як обрізати текст (припустимо новини) і показувати повністю при наведенні миші на лінк "Читати повністю"?

Які можливості є у CSS щоб це зробити?

2

Re: Обрізати текст і показати повний по наведенню

https://jsfiddle.net/9zz6k88L/

Подякували: 221VOLT1

3

Re: Обрізати текст і показати повний по наведенню

Дуже дякую за приклад, за допомогу. А ще є питання тоді таке: якщо новин багато, розширений текст буде змінювати розмір сторінки, а як би зробити щоб повний текст лягав поверх інших новин.

4

Re: Обрізати текст і показати повний по наведенню

Можете навести приклад коду, який викликає описану проблему?

Подякували: 221VOLT1

5

Re: Обрізати текст і показати повний по наведенню

<div class="news-container">

    <div class="news-item">
        <h2>На Іванофранківщині відкрили новий університет - економіко-правничий</h2>
        <div class="news-image"></div>
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <span class="readmore"><a href="">Read more...</a></span>
        </h3>
    </div>

    <div class="news-item">
        <h2>На Іванофранківщині відкрили новий університет - економіко-правничий</h2>
        <div class="news-image"></div>
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <span class="readmore"><a href="">Read more...</a></span>
        </h3>
    </div>

</div>

6

Re: Обрізати текст і показати повний по наведенню

Таку розмітку я придумав. А є у CSS можливість обмежити текст кількістю рядків? А, так 1 ем це і є 1 рядок.

7

Re: Обрізати текст і показати повний по наведенню

Може в бутстрапі є щось таке щоб відобразити фул новину в так званому мікровікні?

8

Re: Обрізати текст і показати повний по наведенню

Наведений код не викликає описаної проблеми (бо там немає CSS). Будь ласка, якщо хочете, щоб вам допомогли - надавайте всю інформацію. Якщо хочете, щоб люди здогадувалися, що вам треба, чи робили за вас - пропонуйте гроші.

9

Re: Обрізати текст і показати повний по наведенню

Короче, перефразую питання.
Є список новин. Заголовок, зображення, текст. Текст має бути скороченим до 3 рядків. І рядом стоїть посилання: "Читати далі". По наведенню на читати далі, я хотів щоб показувався увесь текст новини (ну або так само -
укорочений до вже більшого значення) у квадратному контейнері, який би нагадував вікно.  Знаєте, як посилання в новітніх месенджерах на новину.

А питання таке: яким методом це можливо зробити? CSS я вже зрозумів не вистачить, то може в bootstrap чи ще якомусь фреймворку є таке? Я не прошу код, прошу алгоритм розв'язання, тому що не знаю всіх можливостей CSS.

10

Re: Обрізати текст і показати повний по наведенню

Kniy написав:

Короче, перефразую питання.
Є список новин. Заголовок, зображення, текст. Текст має бути скороченим до 3 рядків. І рядом стоїть посилання: "Читати далі". По наведенню на читати далі, я хотів щоб показувався увесь текст новини (ну або так само -
укорочений до вже більшого значення) у квадратному контейнері, який би нагадував вікно.  Знаєте, як посилання в новітніх месенджерах на новину.

А питання таке: яким методом це можливо зробити? CSS я вже зрозумів не вистачить, то може в bootstrap чи ще якомусь фреймворку є таке? Я не прошу код, прошу алгоритм розв'язання, тому що не знаю всіх можливостей CSS.

https://codepen.io/anon/pen/NwQQYZ
тако

Подякували: leofun011