Как ограничить кол-во знаков в аннотации к новости и исключить выезд элементов за пределы блока?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Всем добра!
Подскажите пожалуйста как ограничить кол-во знаков в аннотации к новости и исключить выезд элементов за пределы блока?
Сейчас проблема такая:
Если в аннотации текста мало, то всё смотрится сносно.
Но если я добавлю еще текста, то кнопка выйдет за пределы блока.
Как этого избежать?

<article class="news">   <section class="news-section"> <div class="news-block flex">   <div class="news-block__img">     <img src="https://w.forfun.com/fetch/ef/ef6db98dba1405127f9836afd6593736.jpeg" alt="">   </div>   <div class="news-block__info">         <h2 class="news-title">Завершился конкурс</h2>     <p class="annotation">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Пор!</p>     <a href="" class="full-news">Читать далее</a>   </div>  </div>   </section> </article>

<article class="news"> <section class="news-section"> <div class="news-block flex"> <div class="news-block__img"> <img src="https://w.forfun.com/fetch/ef/ef6db98dba1405127f9836afd6593736.jpeg" alt=""> </div> <div class="news-block__info"> <h2 class="news-title">Завершился конкурс</h2> <p class="annotation">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Пор!</p> <a href="" class="full-news">Читать далее</a> </div> </div> </section> </article>

.news-block {   outline: 1px solid red;   width: 30rem;   height: 15rem; } .news-block__info {   width: 15rem;   padding: 15px;   height: auto;   max-height: fit-content;   position: relative; } .news-title {   font-size: 20px; } .annotation {   font-size: 15px; }  .full-news {   text-decoration: none;   font-size: 15px;   padding: 10px 15px;   background-color: red;   color: #fff;   border-radius: 5px;   position: absolute;   bottom: 15px; } .news-block__img {   outline: 1px solid green;   width: 15rem;   height: auto; } .news-block__img img {   clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);   height: auto;   min-height: 100%;   max-width: 100%;   object-fit: cover; }  /*вспомогательные*/ .flex {   display: flex; }

.news-block { outline: 1px solid red; width: 30rem; height: 15rem; } .news-block__info { width: 15rem; padding: 15px; height: auto; max-height: fit-content; position: relative; } .news-title { font-size: 20px; } .annotation { font-size: 15px; } .full-news { text-decoration: none; font-size: 15px; padding: 10px 15px; background-color: red; color: #fff; border-radius: 5px; position: absolute; bottom: 15px; } .news-block__img { outline: 1px solid green; width: 15rem; height: auto; } .news-block__img img { clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%); height: auto; min-height: 100%; max-width: 100%; object-fit: cover; } /*вспомогательные*/ .flex { display: flex; }

Дополнительно:

добавь:

.annotation {     overflow: hidden;     text-overflow: ellipsis;     display: -webkit-box;     -webkit-line-clamp: 3;     -webkit-box-orient: vertical; }

.annotation { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

Нужно решить такую задачу?

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

Заказать помощь
Лучший ответ
1
Кирилл JS Ответ

Для ограничения количества символов в аннотации к новости и исключения выхода элементов за пределы блока, вам необходимо воспользоваться функцией substr() в PHP.

Пример использования:

$annotation = "Это текст вашей аннотации к новости, который нужно ограничить по количеству символов.";
$maxLength = 50; // Максимальное количество символов
 
if(strlen($annotation) > $maxLength) {
    $annotation = substr($annotation, 0, $maxLength) . '...'; // Обрезаем строку до указанной длины и добавляем многоточие
}
 
echo $annotation;

$annotation = "Это текст вашей аннотации к новости, который нужно ограничить по количеству символов."; $maxLength = 50; // Максимальное количество символов if(strlen($annotation) > $maxLength) { $annotation = substr($annotation, 0, $maxLength) . '...'; // Обрезаем строку до указанной длины и добавляем многоточие } echo $annotation;

В данном примере мы устанавливаем максимальное количество символов в переменной $maxLength (50 в данном случае). Затем мы проверяем длину строки $annotation. Если она превышает установленное ограничение, мы используем функцию substr() для обрезания строки до указанной длины и добавления многоточия в конце.

Таким образом, вы сможете ограничить количество символов в аннотации к новости и предотвратить выход элементов за пределы блока.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ woocommerce Как отображать при фильтрации товары со значением search параметра visibility: HUSKY — Products Filter for WooCommerce? 1 ответ