Есть блок, в котором находится текст выравненный по ширине. На комп.версии выглядит он замечательно. Но на мобильном - не очень, т.к. в некоторых местах есть большие пробелы между словами. Есть ли свойство или тег отвечающий за ровное выравнивание по ширине без пробелов или перенос слова? Есть пример как выглядит текст на мобильнике при свойстве text-align: justify;
2 ответа
Вам надо расставить переносы через CSS.
.block {
max-width: 250px;
margin: 0 auto;
text-align: justify;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 6 3 2;
/* legacy properties */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;
/* current proposal */
-moz-hyphenate-limit-chars: 6 3 2;
/* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2;
/* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2;
hyphenate-limit-chars: 6 3 2;
}
<html lang="ru-RU">
<body>
<div class="block">
Как включить автоматические переносы Автоматические переносы запускаются в два шага. Первый — установить язык для текста. Это сообщит браузеру, какой использовать словарь. Для корректных переносов нужен словарь переносов, соответствующий языку текста.
Если браузер не знает языка текста, то рекомендации CSS говорят не активировать переносы, даже если они включены в таблице стилей. Переносы — сложная тема. Точки переноса обычно основаны на слогах, использующих сочетание этимологии и фонологии, но
есть и другие правила деления слов. 1. Установка языка Язык веб-страницы устанавливается с помощью атрибута HTML lang: Это лучший способ установки языка для всех веб-страниц, включены там переносы или нет. Установка языка поможет инструментам для
автоматического перевода, скринридерам и другим вспомогательным программам. Атрибут lang="en" применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно
соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема
решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:</div>
</div>
</body>
</html>
Текст взят отсюда: https://habr.com/ru/post/445166/
-
-
Про эти зазоры между словами речь наверное: ibb.co.com/gmD2Scc ibb.co.com/zmWP3GF Commented 24 авг. в 1:30
Как-то так? В данном примере, если экран меньше 400px, то текст выравнивается влево
.block {
max-width: 400px;
margin: 0 auto;
text-align: justify;
}
@media (max-width: 400px) {
.block {
text-align: left;
}
}
<div class="block">
Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Commodi voluptas modi voluptates adipisci eligendi odio eius placeat non dignissimos et sunt officiis culpa, assumenda voluptatibus, odit autem quos quidem natus.
Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Commodi voluptas modi voluptates adipisci eligendi odio eius placeat non dignissimos et sunt officiis culpa, assumenda voluptatibus, odit autem quos quidem natus.
Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Commodi voluptas modi voluptates adipisci eligendi odio eius placeat non dignissimos et sunt officiis culpa, assumenda voluptatibus, odit autem quos quidem natus.
Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Commodi voluptas modi voluptates adipisci eligendi odio eius placeat non dignissimos et sunt officiis culpa, assumenda voluptatibus, odit autem quos quidem natus.
Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Commodi voluptas modi voluptates adipisci eligendi odio eius placeat non dignissimos et sunt officiis culpa, assumenda voluptatibus, odit autem quos quidem natus.
</div>