Как сделать кнопку читать далее в html

Как сделать кнопку читать далее в html

Где full_article.html — это страница с полной версией материала, а read-more — это класс, который можно добавить в CSS для стилизации кнопки.

.read-more  display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; font-size: 16px; transition: background-color 0.3s ease; > .read-more:hover  background-color: #0062cc; > 

Где display: inline-block задает тип элемента (в данном случае кнопка), padding задает отступы внутри кнопки, background-color задает цвет фона, color задает цвет текста, text-decoration: none убирает подчеркивание при наведении на кнопку, border-radius задает скругление углов, font-size задает размер шрифта, а transition задает плавное изменение цвета фона при наведении на кнопку.

Функция «читать далее» после определённого количества слов

Здравствуйте. Как сделать так, чтобы там, где я пометил красным, появлялась ссылка «читать далее»? Т.е как установить лимит слов?

Отслеживать
3,867 4 4 золотых знака 22 22 серебряных знака 58 58 бронзовых знаков
задан 8 фев 2017 в 19:50
91 2 2 золотых знака 4 4 серебряных знака 10 10 бронзовых знаков

Мне кажется неверным делать это на стороне клиента. Но если очень хочется, на js считаете пробелы в строке да и все.

8 фев 2017 в 20:10

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Как правильно заметил @AndreyFedorov , обрезку традиционно логично делают на стороне сервера.

Но если очень хочется, то можно обрезать по словам и на клиенте с помощью javascript:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra. Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.

Но обрезать по количеству слов не всегда уместно, ведь в зависимости от жанра текста в нём могут попадаться слова разной длины, потому результат не всегда предсказуем. Потому на практике чаще обрезают по количеству символов, т.к. символы имеют приблизительно одинаковую ширину и, соответственно, разные тексты тоже будут иметь приблизительно одинаковую ширину:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar rhoncus tempus. Mauris non velit vitae leo tempor fringilla sed quis mi. In dignissim ultrices augue ut molestie. Maecenas venenatis auctor mauris. Integer a ex sit amet nibh ultricies posuere. Integer suscipit dui augue. Donec finibus mi eget dapibus varius. In pulvinar nec dolor eu rhoncus. Etiam volutpat pellentesque eros et euismod. Nam vitae mollis sem. Suspendisse ornare enim libero, a ornare tortor suscipit quis. Nunc tincidunt pretium ligula a finibus. Suspendisse cursus massa a convallis mattis. Integer consectetur aliquam nisl, pretium mattis mi. Donec laoreet felis a ligula congue, tincidunt bibendum dolor dignissim. Nam sodales imperdiet tincidunt. Vivamus eu lobortis nisi, sed sodales nulla. Nullam quis hendrerit mauris. Vestibulum sollicitudin sit amet urna in viverra. Vestibulum eros libero, elementum at vehicula eu, fringilla porta turpis. Curabitur at elit at quam ultrices fermentum ut in turpis. Donec porta, turpis non fermentum sollicitudin, dui purus tincidunt diam, ut euismod orci neque eget felis. Integer pharetra pretium eros ut mattis. Nunc quam nisi, egestas eget dui vel, tempor efficitur tortor.

Ну а если задача стоит вроде «текст должен занимать заданный контейнер, не больше и не меньше», тогда можно скрыть часть текста с помощью css:

div < width: 300px; height: 90px; position: relative; overflow: hidden; background: #EEE; >div a

Как сделать кнопку в HTML

Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

Я кнопка 

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

Я кнопка 

Атрибут disabled блокирует доступ к кнопке.

Я заблокированная кнопка 

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

reset добавляется кнопкам сброса формы. Когда пользователь нажимает на такую кнопку, браузер возвращает значения всех полей формы к изначальным.

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .

Как сделать кнопку с иконкой

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

   Просто кнопка 

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

Как добавить иконку в кнопку:

 Текст кнопки 

.icon-button < background-image: url("../images/icon.svg"); background-size: 90px 97px; >

Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.

Материалы по теме

• Что такое ссылки и как их ставить
• Как сделать картинку ссылкой
• Шаблон HTML-формы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.

• 22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

• 1 ноября 2023

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

• 23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

• 18 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

• 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

• 12 сентября 2023

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

• 31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

• 13 июня 2023

Как понять, что перед вами заголовок

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

• 8 июня 2023

кнопка читать далее

Добрый день! Думаю хорошим решением будет добавить в функционал кнопку читать далее, которая в ленте новостей или постов, при выводе полного текста статьи укорачивала ее, показывая часть, потом сама кнопка при нажатии на которую выводился весь текст прямо в ленте.
В общем не силен в коде, но кое-что нашел, что можно применить:

Если вместо text review поставить свой div все работает, только не на всю ленту, а на первый пост.
Задача, как сделать, чтобы кнопка отрабатывала на все посты в одной ленте.
(подставлял в файлы шаблонов вывода контента), кроме того есть еще одна проблема, на сайте установлена автоподгрузка контента.
Прошу помощи в данном вопросе, или может у кого-нибудь имеется решение лучше! Спасибо!

erni21

• Испытатели
• Сообщений: 33

#2 27 февраля 2018 в 00:06

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

Jestik

• Испытатели
• На орбите
• Сообщений: 3140

#3 27 февраля 2018 в 13:57
Спасибо Вам за помощь! Буду пробовать!

erni21

• Испытатели
• Сообщений: 33

Сегодня в 23:56

Реклама

#4 27 февраля 2018 в 15:07

GWK, там другой человек добавлял, и код нашел я, но я не смог его адаптировать под icms
instantcms.ru/blogs/chut-chut-blog/stil-spiska-dlja-tipa-kontenta-kombinirovanyi.html

Jestik

• Испытатели
• На орбите
• Сообщений: 3140

#5 27 февраля 2018 в 15:07
Это вот убрать надо, смысл с него если оно все равно закоментировано

Jestik

• Испытатели
• На орбите
• Сообщений: 3140

#6 27 февраля 2018 в 15:54

Пора бы уже подобные плюшки добавлять в саму сборку цмс, ну на крайняк как компоненты дополнения по разумной цене

Aliaksandr

• Испытатели
• Сообщений: 1091

#7 27 февраля 2018 в 22:03

GWK, у меня без этого куска все работает

instantcms.ru/users/hostelbeat и я — один и тот же человек. Я просто от старого аккаунта доступ утерял по глупости

GWK

ну дак тут админы дружелюбные, сделали бы новый)

Jestik

• Испытатели
• На орбите
• Сообщений: 3140

#8 1 марта 2018 в 13:44

Для начала в нужном виде вывода контента из папки templates/default/content добавляем примерно такой код:

Код PHP:

ЧИТАТЬ ДАЛЕЕ

Ну и после этого в самом конце нужного вам вида контента добавляем это:

$(document).ready(function() var hhh = 300;
$(«.content_text .f_content»).each(function() if ($(this).height() > hhh) $(this).css(«max-height», hhh+»px»);
$(this).parent().parent().parent().find(«.read-next»).css(«display», «inline»);
$(this).parent().parent().parent().find(«.shadow»).css(«display», «block»);
>
>);

$(«.read-next»).click(function() var block = $(this).parent().find(«.content_text .f_content»);
var shadow = $(this).parent().find(«.shadow»);
if (block.css(«max-height») == hhh+»px») block.css(«max-height», «»);
shadow.css(«display», «none»);
$(this).text(«Скрыть»);
>else block.css(«max-height», hhh+»px»);
$(this).text(«Читать полностью»);
shadow.css(«display», «block»);
>
>);
>);

/*window.onload = function() blok = document.getElementById(‘content_text’);
shadow = document.getElementById(‘shadow’);
parent = blok.parentNode;
blok_height = blok.style.height? blok.style.height: blok.offsetHeight;

if(blok_height > 400) blok.style.maxHeight = ‘400px’;
link = parent.getElementsByClassName(‘read-next’)[0];
link.style.display = ‘inline’;

if(blok.style.maxHeight) blok.style.maxHeight = »;
shadow.style.display =’none’;
link.innerHTML = ‘Скрыть’;
> else blok.style.maxHeight = ‘400px’;
link.innerHTML = ‘Читать далее. ‘;
shadow.style.display =’block’;
>
return false;
>
>
>*/

GWK

Множите по подробней объяснить что и как заменить чтоб все работало, потому если просто вставить код в default_list.tpl.php то нечего не происходить.