Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → HTML та CSS → Обрізати текст і показати повний по наведенню
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
Як обрізати текст (припустимо новини) і показувати повністю при наведенні миші на лінк "Читати повністю"?
Які можливості є у CSS щоб це зробити?
Дуже дякую за приклад, за допомогу. А ще є питання тоді таке: якщо новин багато, розширений текст буде змінювати розмір сторінки, а як би зробити щоб повний текст лягав поверх інших новин.
Можете навести приклад коду, який викликає описану проблему?
<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>Таку розмітку я придумав. А є у CSS можливість обмежити текст кількістю рядків? А, так 1 ем це і є 1 рядок.
Може в бутстрапі є щось таке щоб відобразити фул новину в так званому мікровікні?
Наведений код не викликає описаної проблеми (бо там немає CSS). Будь ласка, якщо хочете, щоб вам допомогли - надавайте всю інформацію. Якщо хочете, щоб люди здогадувалися, що вам треба, чи робили за вас - пропонуйте гроші.
Короче, перефразую питання.
Є список новин. Заголовок, зображення, текст. Текст має бути скороченим до 3 рядків. І рядом стоїть посилання: "Читати далі". По наведенню на читати далі, я хотів щоб показувався увесь текст новини (ну або так само -
укорочений до вже більшого значення) у квадратному контейнері, який би нагадував вікно. Знаєте, як посилання в новітніх месенджерах на новину.
А питання таке: яким методом це можливо зробити? CSS я вже зрозумів не вистачить, то може в bootstrap чи ще якомусь фреймворку є таке? Я не прошу код, прошу алгоритм розв'язання, тому що не знаю всіх можливостей CSS.
Короче, перефразую питання.
Є список новин. Заголовок, зображення, текст. Текст має бути скороченим до 3 рядків. І рядом стоїть посилання: "Читати далі". По наведенню на читати далі, я хотів щоб показувався увесь текст новини (ну або так само -
укорочений до вже більшого значення) у квадратному контейнері, який би нагадував вікно. Знаєте, як посилання в новітніх месенджерах на новину.А питання таке: яким методом це можливо зробити? CSS я вже зрозумів не вистачить, то може в bootstrap чи ще якомусь фреймворку є таке? Я не прошу код, прошу алгоритм розв'язання, тому що не знаю всіх можливостей CSS.
https://codepen.io/anon/pen/NwQQYZ
тако
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися