Css не переносить текст

Полифиллы

Технические несоответствия устаревших браузеров для адаптивного веб-дизайна можно исправить с помощью полифилла. Он представляет собой фрагмент JavaScript кода, который «заполняет» специфический функциональный разрыв между устаревшим браузером и функцией. Существует целый ряд полифиллов, которые могут быть использованы для обеспечения поддержки браузером функций HTML5.

Ниже приведено несколько полифиллов, предназначенных для устранения проблем кроссбраузерности сайта, указанных в пункте 3:

respond.js — реализует медиа-запросы CSS3 для Internet Explorer 6 — 8;
html5shiv разрешает использование семантических элементов HTML5 в Internet Explorer 6 — 8;
selectivzr — эмулирует селекторы и псевдоклассы CSS3 в Internet Explorer 6 — 8. Для полной поддержки требуется либо Mootools 1.3, либо NWMatcher 1.2.3. Частичная поддержка доступна с помощью JQuery 1.3/1.4;
REM-unit-polyfill — определяет, поддерживает ли браузер единицы rem, и обеспечивает запасной вариант. Работает с IE8 и ниже.

Для использования указанных полифиллов, их нужно добавить из CDN или в виде файла в корректном формате внутри условных комментариев в разделе <head> (не забудьте включить одну из необходимых для Selectivizr библиотек JavaScript):

<!--> 
<script src="app/js/selectivizr.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> 
<script src="app/js/rem.min.js"></script> 
<!-- <! -->

Для каждого проекта необходимо оценить, действительно ли необходимы эти дополнительные скрипты, поскольку они могут привести к проблемам с производительностью. Большинство полифиллов компактные, но каждый дополнительно загружаемый скрипт представляет собой дополнительный HTTP-запрос. Это может замедлить загрузку страницы.

Проблемы в устаревших браузерах и различные подходы к разработке

Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например, <header>, <nav>, <section>, <aside>, <footer>) для группировки компонентов дизайна. Селекторы CSS3 используются для выбора конкретных элементов и дальнейшего назначения стилей (например, , :checked, :nth-child(n), :not(selector), :last-child)). И, наконец, адаптивная типографика часто задается с помощью единиц REM (root em).

Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:

Медиа-запросы CSS3: не поддерживается в IE6, 7 и 8;
Семантические элементы HTML5: не поддерживается в IE6, 7 и 8;
Селекторы CSS3: не поддерживается в IE6. Только частично поддерживаются в IE7 и 8;
Единицы REM: не поддерживается в IE6, 7 и 8. Только частично поддерживаются в IE9 и 10;
Лимит количества правил CSS: IE9 и ниже поддерживают только 4095 CSS-селекторов. Правила после 4095-ого селектора не применяются.

Указанные выше ошибки будут иметь наибольшее влияние на стратегию, применяемую при реализации адаптивного дизайна.

Существуют две основных стратегии разработки: постепенное упрощение и прогрессивное улучшение.

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

С другой стороны, пользователям старых браузеров и медленного интернет-соединения будет предлагаться графически усеченная, но все еще функциональная версия сайта.

Подобный подход при реализации кроссбраузерности предполагает начало разработки с простой версии, к которой затем добавляются более сложные элементы. Старые браузеры смогут отображать сайт с базовым уровнем опыта взаимодействия. А новые функции HTML / CSS / JavaScript будут доступны в браузерах, которые могут реально их использовать.

В противоположность этому, постепенное упрощение обеспечивает полнофункциональный уровень UX в современных браузерах. А затем постепенно уменьшает его сложность для старых браузеров за счет графики, но, не касаясь функционала. Идея заключается в том, чтобы начать разработку с новейших веб-стандартов, а затем попытаться минимизировать проблемы, связанные со старыми браузерами.

Какой подход выберете вы, зависит от личных предпочтений и условий проекта:

Прогрессивное улучшение обеспечивает большую стабильность, так как вы можете постепенно добавлять новые функции для современных браузеров. Но оно требует более тщательного планирования;
Некоторые разработчики утверждают, что нет смысла поддерживать устаревшие браузеры и должны использоваться новейшие технологии. Поддержка современных браузеров дает намного лучший опыт взаимодействия;
Существует мнение, что прогрессивное улучшение мертво, так как множество JavaScript-приложений не работают надлежащим образом при этом подходе;
Веб-доступность для общественных учреждений может быть определена в юридических требованиях конкретных территориальных образований, и это может повлечь необходимость применения особого подхода.

Учитывая появление таких инструментов для определения функций, как Modernizr, лично я склоняюсь к использованию постепенного упрощения и черного списка браузеров при разработке совместимых сайтов.

Что такое псевдоэлемент и его назначение

Псевдоэлемент — это дополнение к селектору, с помощью которого можно стилизовать элемент, не определённый в структуре HTML документа. Добавляется он к селектору c помощью символов , т.е. так .

Но нотация с двумя двоеточиями появилась только в CSS3. Это было сделано для того, чтобы в CSS коде можно было очень просто отличить псевдоэлементы от псевдоклассов. До CSS3 псевдоэлементы определялись так же, как и псевдоклассы, т.е. с помощью одного двоеточия. Все современные браузеры принимают для определения псевдоэлементов как одно двоеточие, так и два.

Но если проект не требует поддержку браузера Internet Explorer 8, то рекомендуется в CSS коде для определения псевдоэлементов писать два двоеточия. В противном случае необходимо использовать одно двоеточие, т.к. Internet Explorer 8 не поддерживает запись с .

Обратите внимание, что псевдоэлементы не добавляются в DOM. Поэтому получить псевдоэлемент с помощью JavaScript и с использованием библиотеки jQuery нельзя

Псевдоэлементы применяются на сайте только в оформительских целях, т.е. для добавления к элементам определённых дизайнерских решений. С помощью них не рекомендуется добавлять на сайт важную информацию. Если этих элементов нет в DOM, то к ним нельзя добавить обработчики событий или каким-то другим образом взаимодействовать с ними через JavaScript.

Список псевдоэлементов:

outerHTML: HTML элемента целиком

Свойство содержит HTML элемента целиком. Это как плюс сам элемент.

Посмотрим на пример:

Будьте осторожны: в отличие от , запись в не изменяет элемент. Вместо этого элемент заменяется целиком во внешнем контексте.

Да, звучит странно, и это действительно необычно, поэтому здесь мы и отмечаем это особо.

Рассмотрим пример:

Какая-то магия, да?

В строке мы заменили на . Во внешнем документе мы видим новое содержимое вместо . Но, как видно в строке (), старая переменная осталась прежней!

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

То есть, при произошло следующее:

был удалён из документа.
Вместо него был вставлен другой HTML .
В осталось старое значение. Новый HTML не сохранён ни в какой переменной.

Здесь легко сделать ошибку: заменить , а потом продолжить работать с , как будто там новое содержимое. Но это не так. Подобное верно для , но не для .

Мы можем писать в , но надо иметь в виду, что это не меняет элемент, в который мы пишем. Вместо этого создаётся новый HTML на его месте. Мы можем получить ссылки на новые элементы, обратившись к DOM.

Условные комментарии

Если нужно создать резервный CSS или включить кроссбраузерность JavaScript для ранних версий Internet Explorer, то можете использовать условные комментарии. Они поддерживаются в Internet Explorer 5-9, они используют синтаксис комментариев HTML в сочетании с логическими значениями. В зависимости от логического значения (true или false) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:

<!--> КОД, КОТОРЫЙ БУДЕТ ВЫПОЛНЯТЬСЯ <!-->

// если Internet Explorer 


// если НЕ Internet Explorer 


// если Internet Explorer 7 


// если НЕ Internet Explorer 7 


// если Internet Explorer 9 или НИЖЕ 


// если Internet Explorer 7 или ВЫШЕ


// если Internet Explorer 6 ИЛИ 7 


// если ВЫШЕ Internet Explorer 6 НО НИЖЕ 9

Код автоматически скрывается во всех браузерах, не поддерживающих условные комментарии. Наглядным примером того, как условные комментарии могут быть эффективно использованы на практике, является HTML5 Boilerplate, который добавляет специфические классы CSS для устаревших версий Internet Explorer:

<!-->      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <!--> 
<!-->         <html class="no-js lt-ie9 lt-ie8" lang=""> <!--> 
<!-->         <html class="no-js lt-ie9" lang=""> <!--> 
<!--><!--> <html class="no-js" lang=""> <!--<!-->

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью «переезжает» на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет «выглядеть» на клиентской стороне трудно, поэтому задавать переносы «вручную» бессмысленно:

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

Решаем проблему переноса слов с помощью HTML

Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста. Для этого в HTML имеется несколько вариантов:

Использование символа мягкого разрыва — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:

Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

Перенос слов средствами CSS

Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

normal – слова не переносятся;
break-word – автоматический перенос слов;
inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

normal – используются правила переноса, установленные по умолчанию;
word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:

none – отключает перенос слов в CSS ;
manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса () ;
auto – браузер автоматически переносит слова на основе своих настроек.

должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

Запрет переноса слов

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
Задав свойству white-space значение « nowrap » ( white-space: nowrap ).

Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

:fullscreen (эксперимент)

ПК :fullscreen выбирает элементы, которые отображаются в полноэкранном режиме.

Как не странно, он не предназначен для сценария, когда пользователь нажимает клавишу F11 для входа в полноэкранный режим браузера. Скорее всего он предназначен для работы с JavaScript Fullscreen API, который ориентирован на изображения, видео и игры, исполняемые в родительском контейнере.

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

Если вы собираетесь использовать ПК :fullscreen, то помните, что браузеры стилизуют этим элементы очень по-разному. Кроме того, вы будете иметь дело с вендорными префиксами не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку screenfull.js от Hernan Rajchert, которая сглаживает большинство причуд браузеров.

Fullscreen API выходит за рамки данной статьи, но вот фрагмент кода, который будет работать в браузерах на основе WebKit и Blink.

HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1><button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

h1:fullscreen {    background: orange;}

Demo:

Текст с фоновым изображением

ATUIN

1
2
3
4
5
6
7
8
9
10
11

<defs>

</pattern>

</filter>

</defs>

<text x=»50%»y=»90%»>ATUIN</text>

</svg>

.imgsvg text {
font-family: Tahoma, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 65px;
stroke: #337AB7;
stroke-width: 1px;
filter: url(#shbgfilter);
fill: url(#bgfilter);
text-anchor: middle;
}

1
2
3
4
5
6
7
8
9
10
11

.imgsvg text {

font-familyTahoma,sans-serif;

font-weightbold;

text-transformuppercase;

font-size65px;

stroke#337AB7;

stroke-width1px;

filterurl(#shbgfilter);

fillurl(#bgfilter);

text-anchormiddle;

}

Бонус: SASS миксины для ссылок

Если вы работаете с препроцессорами CSS, такими как SASS, этот бонус будет вам интересен.

Для оптимизации работы вы можете использовать миксины SASS для создания базового набора ссылок.

Идея, скрывающаяся за данными миксинами, в том, что состояния не объявлены по умолчанию. Поэтому мы “вынуждены” в дружественной форме объявить все четыре состояния ссылок.

:focus и :active ПК обычно пишутся вместе. Не стесняйтесь разделять их если вам угодно.

Обратите внимание, что эти миксины могут быть использованы для любого html-тега, не только для ссылок. А вот и миксины:

А вот и миксины:

@mixin links ($link, $visited, $hover, $active) {    & {        color: $link;        &:visited {            color: $visited;        }        &:hover {            color: $hover;        }        &:active, &:focus {            color: $active;        }    }}

Применение:

a {    @include links(orange, blue, yellow, teal);}

Компилируется в:

a {  color: orange;}a:visited {  color: blue;}a:hover {  color: yellow;}a:active, a:focus {  color: teal;}

Demo:

Атрибуты

direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
font-size — Размер шрифта. Значение по умолчанию 12 пт.
font-size-adjust — Значение по умолчанию — none
font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
letter-spacing — Интервал между буквами. Возможные значения: normal | число
text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация соедержимого с помощью CSS свойства all

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

Оказавшись в такой же ситуации, вы вероятно напишете в CSS:

Видно, что нужно устанавливать все свойства в . К счастью, нас выручит CSS свойство . Я уже писала о нем в заметке, но стоит еще раз упомянуть в данном контексте.

Используя свойство , мы можем переписать код следующим образом:

Это отлично работает во всех браузерах, которые поддерживают данное свойство (посмотрите упомянутую заметку), однако есть важное замечание: это объявление установит буквально все свойства в значение inherit, даже те, которые вам не хочется. Поэтому применять all — это лишь чрезвычайная мера, особенно полезная, если вы хотите «заложить основу» элемента и можете управлять свойствами через CSS

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

Обратите внимание, что это затронет атрибуты, которые могут быть установлены через CSS, не SVG атрибуты. Т.о

если атрибут может быть установлен через CSS, он будет искать значение родителя, а иначе — не будет.

Мы в состоянии заставить атрибуты представления наследоваться от стилей элемента . Но что если наша иконка содержит несколько элементов, и мы не хотим, чтобы все элементы наследовали свойства от ? Что делать, если мы хотим применить разные цвета для разных элементов внутри ? Установка одного стиля к больше не поможет, нужно что-то еще, чтобы помочь нам задать нужные цвета нужным элементам…

:read-only

ПК :read-only нацелен на нередактируемый элемент. Поведение похоже на :disabled. Наличие атрибута в разметке поможет решить, какой из псевдоклассов следует использовать.

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

Пример: у элемента формы в html указан атрибут readonly. Поэтому для него сработают правила псевдокласса :read-only и текст будет серым.

HTML:

<input type="text" value="I am read only" readonly>

CSS:

input:read-only {    color: gray;}

Demo:

:lang

ПК :lang соответствует языку элемента, который определен комбинацией атрибута lang=””, определенного meta элемента и информации из заголовка полученного по протоколу HTTP.

Html-атрибут lang=”” обычно используется в теге html, но так же может быть и у другого тега, если это необходимо.

В сопроводительном примечании написано, что считается хорошим тоном указывать в CSS-свойстве quotes какие кавычки должны быть установлены в документе. Тем не менее большинство браузеров (включая IE9 и выше) способны добавлять правильные кавычки автоматически, если они не объявлены явно в CSS.

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

Пример: кавычки в немецком (de), установленные браузером, выглядят следующим образом:

Тем не менее в большинстве примеров, найденых в сети, кавычки установлены при помощи CSS и выглядят так (что соответствует правильному варианту в немецком языке):

Оба варианта фактически верны. Поэтому вы должны решить для себя позволить ли браузеру автоматически ставить кавычки или добавить их самостоятельно при помощи псевдоэлемента :lang и css-свойства quotes.

Давайте определим стиль кавычек через CSS.

HTML:

<article lang="en">    <q>Lorem ipsum dolor sit amet.</q></article><article lang="fr">    <q>Lorem ipsum dolor sit amet.</q></article><article lang="de">    <q>Lorem ipsum dolor sit amet.</q></article>

CSS:

:lang(en) q { quotes: '“' '”'; }:lang(fr) q { quotes: '«' '»'; }:lang(de) q { quotes: '»' '«'; }

Demo:

Как запретить перенос текста? | WebReference

HTML самостоятельно переносит текст на другую строку, если текст целиком не помещается в одну строку. В некоторых случаях, наоборот, требуется запретить перенос слов, к примеру, в пунктах меню или в коде программы, чтобы не «ломать» вёрстку. Для этого используется стилевое свойство white-space со значением nowrap, оно добавляется к нужному элементу с текстом.

В примере 1 white-space применяется к ссылкам, чтобы текст ссылки не «разбивался» и не переносился на другую строку.

Пример 1. Использование white-space

Результат данного примера показан на рис. 1.

Рис. 1. Меню с запретом переноса текста