G|Translate: English EN Deutsch DE Italiano IT Русский RU Español ES Українська UK

Как сделать перенос длинной ссылки (URL) на другую строку

5/5 - (1 голос)

Длинная ссылка URL выходит за пределы блока

Как сделать перенос длинной ссылки (URL) на другую строку

Вот, например, ссылка на сайт MS
https://docs.microsoft.com/ru-ru/microsoftteams/platform/concepts/build-and-test/deep-links?tabs=teamsjs-v2

При просмотре на широком экране все в порядке.

В мобильной версии сайта ссылка выходит за пределы блока и браузер рисует лишнее место справа.

Как сделать перенос длинной ссылки (URL) на другую строку

Вроде немного ссылка за пределы блока вышла — но получается так.

Как сделать перенос длинной ссылки (URL) на другую строку

И самое плохое — наша кнопка «Обратная связь» оказалась за пределами экрана мобильной версии.

Особенно такая беда в бесплатных темах WordPress.

Как это исправить?

Нам нужен CSS для указания переноса строк

Таблицы каскадных стилей управляют выводом браузера на экран.

Кратко о синтаксисе — указываем селектор и как выводить содержимое (в фигурных скобках)

  • с точной — это класс
  • с решеткой — это по id элемента
  • без точки или решетки — это тэг html

Вот как последний вариант там и нужен.

Вспоминаем, что ссылки — это <a>…</a>

Вот простое решение — силовой перенос «break-all», если содержимое не помещается в контейнер.

Нам не важен разрыв и читаемость — это всё равно  ссылка

a { 
word-break : break-all;
}

Плагин Simple Custom CSS

https://ru.wordpress.org/plugins/simple-custom-css/

Как сделать перенос длинной ссылки (URL) на другую строку

Плагин добавляет позицию в меню «Внешний вид».

Добавляем  наш код CSS и смотрим на результат.

А теперь все хорошо :) 

Как сделать перенос длинной ссылки (URL) на другую строку

И ссылка перенеслась.

И кнопка обратной связи на месте.

 

Подпишитесь в VKontakte - нажмите кнопку
Подпишитесь в Telegram - нажмите кнопку
Наша группа ODNOKLASSNIKI

Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла




Пишите на электронную почту (тема и email будут добавлены автоматически в письмо)

В Вашем браузере должна быть настроена обработка ссылок mailto

site_post@bk.ru

или просто скопируйте адрес e-mail



Последние публикации

  • Статьи от: Автор
  • Рубрика: Блог
  • Сортировка: дата публикации по убыванию

Ограничение 100 Мб для бесплатной версии All-in-One WP Migration

31.05.2022
Публикация 8 месяцев назад
Есть такой плагин для архивирования сайта  All-in-One WP Migration Читаем статью Плагины для архивирования и переноса сайта Было так: тестовый вариант до 64 Мб бесплатный вариант (расширение Basic) до 500 Мб выше 500 Мб сайт - платный вариант А стало так: бесплатный вариант до 100 МБ платный вариант - сайты более 100 Мб Ссылка на расширение к плагину https://import.wp-migration.com/en Чувствуете, что одной колонки не хватает? Остался вариант только  "премиум". Причем при создании архива Вам плагин ничего не сообщает, что правила игры изменились. Плагин дает возможность создать архив для любого объема сайта. В результате архив у Вас есть - а...
(Читать полностью...)

Новые столбцы в админке WordPress

22.02.2022
Публикация 11 месяцев назад
Как добавить свои столбцы в административной панели WordPress Нужно в простом варианте сделать несколько вещей: создать саму колонку и его название (через add_filter) заполнить его данными (через add_action) при необходимости включить возможность сортировки колонки (через add_filter) Создаем колонку // создаем новую колонку для записей add_filter( 'manage_'.'post'.'_posts_columns', 'tsl_manage_pages_columns', 4 ); function tsl_manage_pages_columns( $columns ){ $columns = array( 'views' => 'Визиты' ); return $columns; } Итого в массиве $columns появится новый элемент (обычно в самом конце) Заполняем...
(Читать полностью...)

Функция PHP date() и ядро WordPress

20.11.2021
Публикация 1 год назад
Это же просто. Возвращается текущая дата и текущее локальное время сервера (с правильно установленной таймзоной). Вот каждый может проверить https://wpavonis.ru/server.php Но если запустить этот же код из среды WordPress - мы получим другие результаты UTC 2021-11-20 07:42:01 Что это за фокус? Почему время по Гринвичу  и таймзона другая? WordPress живет в прошлом? ДА! Как говорится - "это не баг, а фича". При запуске ядро WP устанавливает таймзону на UTC. Сделано это специально. Вот тут подробнее. https://wp-kama.ru/function/current_time ВАЖНО: Функция учитывает время сервера установленное в date.timezone setting и переписывает его в момент инициализации системы,...
(Читать полностью...)

Обновление плагина вывода списка страниц в конце поста

20.04.2021
Публикация 2 года назад
Вышла версия 1.9 плагина tsl-plugin-out-list-posts Страница плагина находится здесь Плагин вывода анонсов постов в конце контента Плагин добавляет в конце текста анонсы дочерних или одноуровневых страниц для текущего контента. Логика вывода: список дочерних страниц при отсутствии дочерних страниц - выводятся страницы одного уровня при наличии и дочерних страниц и страниц одного уровня - выводятся дочерние страницы на верхнем уровне при отсутствии дочерних страниц ничего не выводится   По умолчанию выводятся первые 700 знаков текста и миниатюра. Для примера дерево страниц. Верхняя страница Средняя страница 1 Средняя страница 2 Средняя страница...
(Читать полностью...)

Прячем информационные файлы WordPress

13.02.2021
Публикация 2 года назад
После установки WordPress в папке сайта создаются несколько информационных файлов Это собственно файлы: license.txt readme.html Их можно просмотреть через прямой доступ в строке URL. Ранее в файлах добрый WP указывал установленную версию, чем облегчал работу хакеров. Теперь убрали, но нельзя гарантировать, что в будущих обновлениях снова не добавят. Поэтому лучше закрыть. Совет "Удалить после установки!" не подходит - т.к. при обновлении эти файлы будут восстановлены. Файл license.txt Описание лицензии GPL и указание на CMS WP  Файл readme.html Общее описание WordPress Файл wp-config-sample.php Это, собственно, не информационный файл. Это образец для создания...
(Читать полностью...)

WordPress 5.6 — результаты поиска на сайте стали попадать в индекс

05.02.2021
Публикация 2 года назад
В версии WP 5.6 страница с результатами поиска изменилась и стала попадать в индекс поисковых машин Что это такое?  А это теперь WordPress оптимизировал URL выдачи результатов внутреннего поиска в виде domen.ru/search/term Ранее было domen.ru/? s = term И побежали радостные китайские боты заводить в поиск всякую чепуху. Если в этот момент на страницу заходит поисковый  робот: он её проверяет получает ответ от сервера 200 ОК  (даже при отрицательных результатах поиска!) ой и радостно сохраняет в индексе Вот так это выглядит в строке URL   Для запрета поисковым роботам индексации необходимо добавить в файл robots.txt инструкцию Disallow: /search Это запрет на индекс...
(Читать полностью...)

В WP 5.6 добавлена базовая авторизация HTTP

26.01.2021
Публикация 2 года назад
Можно увидеть в файле .htaccess новую строку Это добавлена возможность создавать пароли приложений: на сайте должно быть включено шифрование SSL (протокол HTTPS) для API WP для защиты мобильного входа в админку xml-rpc.php (через сервер WordPress) Подробнее можно прочитать в статье  Пароли приложений (авторизация) Сделано на основе плагина Application Passwords Пароли можно установить в управлении учетной записью пользователя Смысл в том, что Вы указываете мобильное приложение на своем смартфоне (которое, например, WordPress), создаете для него пароль = и Вы можете входить в мобильную версию админки (только с данного устройства) без основного пароля...
(Читать полностью...)

X

    Пожалуйста, докажите, что вы человек, выбрав сердце.