Как перенести строку только для экранов 20 дюймов и меньше?

@morda77 · Регистрация: 22.12.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте! Есть текстовая строка в блоке. На широком экране она в одну строку, а на 20 дюймовом она переносится не в том месте текста, в котором бы хотелось.
Как, при помощи CSS, определить слово, с которого необходим перенос только для 20 дюймовых экранов, а на более широких оставить в одну строку?
Спасибо.

@Amplua · 18.06.2020, 16:57

Вот стили CSS:

CSS
1
2
3
4
5
      @media screen and (max-width: /*здесь указываешь нужную тебе ширину - 20 дюймов, в пикселях*/){
                      .stroka{/*стили для строки*/
                              max-width: /*здесь указываешь максимальную длину строки*/;
                      }
               }

Вот код HTMLL:

HTML5
1
2
3
/*Выделяешь нужный текст особым блоком и даёшь ему стиль stroka*/
<div class = "stroka">/*текст*/
</div>

@gogolik · 18.06.2020, 19:38

Ещё можно задать класс для br и показывать его только на нужных разрешениях:

HTML5
1
<span>Slovo <br class="br">слово</span>

CSS
1
2
3
4
5
@media screen and (max-width: %ширина вьюпорта 20-дюймовича%){
    .br {
        display: none;
    }
}

@Amplua · 18.06.2020, 19:41

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

@gogolik · 18.06.2020, 19:52

Amplua, всю жизнь работало, а тут перестало?

Нудно и долго прописать один тег в одном месте? При каких изменениях всё пойдёт прахом?

@mrtoxas · 18.06.2020, 20:26

Amplua, фрагмент текста принято выделять при помощи span, а не div. Если слетят стили, то использование div'а может разбить предложение на две или три отдельных части, да и парсеры такое не поймут. И ничего страшного не будет, если скрыть/показать br по медиа-запросу, семантически это тоже верно и вряд ли что-то пойдет прахом

@Amplua · 18.06.2020, 22:59

У меня всё наоборот всегда было

Новые блоги и статьи Все статьи Все блоги /
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,712

	Как перенести строку только для экранов 20 дюймов и меньше? 18.06.2020, 16:02. Показов 541. Ответов 6 Метки css, html, перенести, строку (Все метки) Здравствуйте! Есть текстовая строка в блоке. На широком экране она в одну строку, а на 20 дюймовом она переносится не в том месте текста, в котором бы хотелось. Как, при помощи CSS, определить слово, с которого необходим перенос только для 20 дюймовых экранов, а на более широких оставить в одну строку? Спасибо. 1

@Amplua 2 / 0 / 2 Регистрация: 14.04.2020 Сообщений: 51
	18.06.2020, 19:41
	Сразу видно, что Вы вы этом не разобрались. Это так не работает. Тем более, что это слишком нудно и долго и при малейших измениях всё пойдёт прахом. 0

@gogolik Супер-модератор 3945 / 2051 / 829 Регистрация: 13.03.2010 Сообщений: 6,749
	18.06.2020, 19:52
	Amplua, всю жизнь работало, а тут перестало? Нудно и долго прописать один тег в одном месте? При каких изменениях всё пойдёт прахом? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	18.06.2020, 20:26
	Amplua, фрагмент текста принято выделять при помощи span, а не div. Если слетят стили, то использование div'а может разбить предложение на две или три отдельных части, да и парсеры такое не поймут. И ничего страшного не будет, если скрыть/показать br по медиа-запросу, семантически это тоже верно и вряд ли что-то пойдет прахом 0

@Amplua 2 / 0 / 2 Регистрация: 14.04.2020 Сообщений: 51
	18.06.2020, 22:59
	У меня всё наоборот всегда было 0