Каковы лучшие методы для решения желаемых разрывов строк в адаптивном веб-дизайне?

Я разрабатываю множество простых одностраничных веб-элементов для продажи или по электронной почте. Я часто сталкиваюсь с проблемами с заголовками и желаемыми разрывами строк на разных носителях.

Например, я мог бы иметь заголовок, такой как:

Наша новая штуковина - лучшая вещь из нарезанного хлеба!

Без абсолютно никакого внимания к разрывам строк разрывы строк выглядят так:

Наша новая штуковина - лучшая вещь из
нарезанного хлеба!

При полном размере сети я хотел бы разбить строку после "the". Создание двух строк.

Наша новая штуковина -
лучшая вещь из нарезанного хлеба!

Для экрана средней ширины я бы сломал дважды:

Наша новая штуковина
- лучшая вещь из
нарезанного хлеба!

Для еще более узких экранов я бы разбил после «нового», после «штуковины» и после «штуки». Создание четырех строк.

Наша новая
штуковина
- лучшая вещь из
нарезанного хлеба!

Я действительно не хочу использовать теги break ( <br>), потому что это жестко устанавливает разрывы во всех размерах. До сих пор я использовал медиа-запросы и проценты ширины для различных тегов h1- h5так, чтобы ширина тега приводила к разрыву. Но это кажется мне "хакерским" ( иногда оно очень темпераментно, основываясь на реальном тексте).

Какой лучший способ контролировать разрывы строк без жесткого кодирования их в HTML?

Я советую это только на основании того, что он используется для коротких фрагментов текста, а не абзацев.

Форматирование заголовков может и должно контролироваться в максимально возможной степени в разумных пределах . JavaScript или лишние ненужные элементы не совсем «разумные пределы» .

Неразрывные пробелы с другой стороны ... могут быть полезны при модерации.
Помещение их между парами слов и триплетами, которые вы хотели бы сохранить вместе, может дать желаемые результаты.

Однако вы не можете использовать многие из них последовательно, в зависимости от длины слов, которые вы используете, слишком большое количество ссылок приведет к переполнению текста из области просмотра или его контейнера.

Некоторые быстрые эксперименты с вашим собственным набором слов должны выявить лучшие слова для ссылки.

Для примера в этом вопросе HTML может выглядеть так:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

Здесь на самом деле нет необходимости CSS. CSS в этом примере, который я создал , просто для удовольствия.

В двух словах, ключом к этому методу является ограничение количества мест, где текст может быть разбит.

Перечитав вопрос, я понял, что не совсем удовлетворил требования. Для этого конкретного случая и при условии, что существуют другие страницы, требующие такого же внимания, я бы определил один <br>для точки останова полной ширины. Затем я бы использовал один и тот же класс на каждой странице в самом идеальном месте заголовка.

Этот <br>класс будет разрушаться при чем-либо меньшем, чем полная ширина, действуя так, как будто его даже нет, с использованием медиа-запросов. При размерах окна просмотра меньше полной ширины мы полагаемся на  одни.

Еще один пример с синглом,<br> который ближе к цели.

HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

Лучшей практикой является признание того, что вы не имеете никакого реального контроля над разрывами строк в сети, и лучше проектировать с учетом этого.

Любое решение об обратном неизбежно должно быть хакерским. Поскольку это будет взлом, HTML не придерживается определенных пользователем разрывов строк вне жесткого кодирования. Вы можете сделать это с JS довольно легко. Установите точки останова с пустыми интервалами с уникальными классами, а затем, основываясь на размере области просмотра, вы можете внедрить теги BR в каждый требуемый SPAN.

Есть несколько стилей CSS, которые будут работать в новых браузерах, чтобы управлять тем, как браузер обрабатывает перенос строк, но он все равно не даст вам точный контроль, который вы ищете в этой ситуации.

С другой стороны, если ваша цель состоит не столько в контроле отдельных разрывов строк, сколько в том, чтобы ваш текстовый блок «укладывался» в относительно ровные строки, я бы по-разному устанавливал ширину DIV для каждой области просмотра. Это не будет идеально, но, вероятно, довольно близко и может быть лучшим компромиссом.

Для этого есть плагин jquery, Balance Text .

Это плагин, созданный Adobe,text-wrap: balance; созданный вместе с предложением Adobe, чтобы получить опцию CSS, которая бы просто делала это, как функция Adobe InDesign Balance Ragged Lines (звучит замечательно, но даже если она будет принята, браузеры поддержат ее через годы).

Однако плагин работает прямо сейчас. Он балансирует любые элементы, которые имеют класс balance-text, или при использовании jQuery, как$('.some-elements').balanceText();

• Вот официальная демоверсия Adobe с использованием выровненного текста .

• Вот демонстрация, которую я сделал, используя <h1>s по левому краю - нажмите edit, чтобы увидеть код. Это показывает некоторые ограничения на момент написания:

Ограничения

Этот код в настоящее время работает только с текстом в тегах уровня блока без встроенных элементов.

В демо - версии 4 вы будете видеть , как что - либо в пределах вашего блока сбалансированного текста , как в <a>ссылке, <span>S или акцент , как <em>, <strong>, <b>, и <i>т.д. получает удалены.

Кроме того, сравнивая демонстрации 1, 2 и 5, вы увидите, что вам нужно использовать и класс CSS, и вызов jQuery.

Это кажется умеренно надежным, но иногда сбойным - во время написания он иногда проскальзывает, когда находится в боковом столбце, оставляя одиноких сирот (но, кажется, работает 95% + времени, и я еще не видел, как он проскальзывал, кроме когда в боковой колонке), и по необъяснимым причинам мои демонстрации не работают на Firefox, но демонстрации Adobe работают (хорошо в IE9 +, не могу сейчас тестировать в IE8). Если вы используете его, учтите некоторое время тестирования.

Я должен иметь дело с этим несколько регулярно, с вкладом дизайнеров, желающих, чтобы вещи сломались определенным образом. Я обнаружил, что самый простой способ сделать это - поместить интервал с классом в текст, а затем использовать этот интервал display: block;для медиазапросов.

Так это будет выглядеть примерно так:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Тогда у меня будет CSS с чем-то вроде этого:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

Вы все еще должны пройти и отточить это, чтобы убедиться, что вещи ломаются так, как вы хотите для всех ширин.

Если это частая проблема, вы можете создать свой собственный набор классов разрыва строки в виде Twitter Bootstrap или любой другой системы сетки, которую вы используете, моделируя имена классов после любого соглашения об именах, которое вы используете.

Вы можете использовать JavaScript для определения ширины экрана и записи правильной версии (с <br>, как у вас есть в вашем посте) в пустой div с помощью innerHTML.

К сожалению, «желаемые веб-перерывы» и «лучшие веб-практики» не сочетаются друг с другом. Отпустите свое перфекционистское желание, чтобы каждое слово было в нужном месте - слишком много возможностей экрана и слишком много читателей, у которых нет дизайнерского мышления, вам даже нужно заботиться о переносах строк в их названиях. Посмотрите «Адаптивный веб-дизайн», чтобы лучше понять эти проблемы.

Мой текущий метод ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

И CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

Ширина иногда нуждается в некоторой корректировке на основе фактического используемого текста, но это общая схема, которую я использую. Существенно уменьшая ширину h1тега так, чтобы линия разрывалась там, где я хочу, чтобы она разрывалась.

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

Вы можете добавить white-space: nowrapи разместить <wbr>в местах, где вы хотите, чтобы разрывы строк. Если этого недостаточно, и вы хотите точного управления медиа-запросами, вы все равно можете добавить классы, такие как<wbr class="mobileOnly">

<wbr>документ: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr