Які найкращі практики для вирішення потрібних розривів ліній у чуйному веб-дизайні?

Я розробляю безліч простих веб-сторінок на одній сторінці для продажу або електронної пошти. Я часто зустрічаю проблеми з заголовками, і потрібні розриви рядків на різних ширинах медіа.

Наприклад, у мене може бути такий заголовок, як:

Наша нова річмамаб - це найкраща штука з нарізаного хліба!

Без абсолютно уваги до розривів рядків лінія розривів виглядає так:

Наша нова річмамаб - це найкраща штука з
нарізаного хліба!

У повному розмірі веб-сторінки я хотів би перервати лінію після "the". Створення двох рядків.

Наша нова річмамаб - це
найкраща штука з нарізаного хліба!

Для екрана із середньою шириною я би зламав двічі:

Наша нова річмамаб
- це найкраща штука
з нарізаного хліба!

Для ще більш вузьких екранів я б перервався після "нового", після "речімабоб" і після "речі". Створення чотирьох рядків.

Наша нова
річмамаб
- це найкраща штука
з нарізаного хліба!

Я дійсно не хочу використовувати теги розриву ( <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>сек - хіт редагування , щоб побачити код. Це показує деякі обмеження на час написання:

Обмеження

Цей код наразі працює лише над текстом у блокових тегах без вбудованих елементів.

У демо - версії 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;
}
}

Вам все одно доведеться пройти тонкий перегляд і переробити це, щоб переконатися, що все порушиться так, як вам потрібно, на всі ширини.

Якщо це часте питання, ви можете створити власний набір класів розриву рядків a la Twitter Bootstrap або будь-яку іншу систему сітки, моделюючи назви класів після того, як ви використовуєте конвенцію про іменування.

Ви можете використовувати JavaScript, щоб визначити ширину екрана і записати правильну версію (з <br> 'такою, якою ви їх у своєму дописі) в порожній розділ через 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>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr