Как перенести строку только для экранов 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

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

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

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

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

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

@gogolik Супер-модератор 3952 / 2061 / 829 Регистрация: 13.03.2010 Сообщений: 6,780
	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