CSS3-текст
включает свойства для работы с текстом, позволяющие решить проблемы с переносом текста и обрезкой текста в пределах содержимого.
CSS3-свойства для форматирования текста
1. Обрезка строки text-overflow
Свойство позволяет ограничивать длину текста в случае, когда он не умещается в контейнер, визуально обрезая его или отображая многоточием. Свойство работает только при задании следующих условий: должна быть определена ширина контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap . Не наследуется.
Синтаксис
P {
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Рис. 1. Обрезка текста с помощью свойства text-overflow
2. Перенос внутри слов word-break
В обычной ситуации слова переносятся на другую строку в местах пробелов или дефисов («мягкий перенос»), или же в случае принудительного переноса с использованием элемента
. Данное свойство позволяет установить правила переноса внутри слов для того, чтобы длинные строки полностью заполняли пространство внутри контейнера. Не используется для CJK-языков (китайский-японский-корейский). Наследуется.
Синтаксис
P {word-break: normal;}
p {word-break: break-all;}
p {word-break: keep-all;}
3. Перенос слов в строке word-wrap
Применяется в случаях, когда текст не умещается в свой контейнер и выходит за его границу. Позволяет разрывать длинные слова и переносить их на следующую строку. Наследуется. Срабатывает лишь в случае, если значение white-space разрешает разрыв строк.
Урок 5.
В этом уроке мы:
1. Узнаем как сделать чтобы html код был для нас более удобен и легко читаем.
2. Разберем как правильно делать перенос текстовой строки.
Делаем html код удобным.
Сейчас наш код понятен и легко читаем, так как в нем мало текста и практически нет тегов. Когда мы создадим более сложную страницу, то там будет много тегов, соответственно найти нужный будет сложно.
Чтобы не было каши из тегов, нужно изначально расставлять теги и строки так, чтобы они визуально воспринимались легче. Когда браузер считывает информацию с html страницы, ему без разницы сколько пробелов и сколько пустых строк в коде.
Я изменил текст в коде страницы относительно той, которую мы создавали, но это не важно. На левом и на правом рисунке изображен один и тот же код. Оба варианта будут отображаться браузером на экране монитора абсолютно одинаково. Согласитесь, работать с кодом изображенным справа будет гораздо легче, чем с тем, что слева.
Рассматриваемый нами код очень простой, но даже сейчас заметна разница в визуальном восприятии. Каких-либо определенных правил "наведения порядка" нет, каждый мастер сам решает как ему удобнее работать.
Перенос строки html. Тег <br>.
Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.
Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:
Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу
(как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.
Тег <br>
Когда мы в третьем уроке знакомились с тегами, я упомянул, что бывают теги которые не требуют закрытия. Тег <br>
один из них, служит он для переноса строки.
Давайте применим его в коде:
Мы вставили тег <br>
в наш html код и теперь при запуске файла через браузер часть текста будет перенесена на следующую стоку.
* Не забываем сохранять изменения в Notepad (Ctrl + S) и обнавлять страницу в браузере (F5).
Часто возникает потребность добавить новый абзац, но без пустой строки, которую вставляет тег абзаца
Для некоторых фрагментов текста принятые для абзацев стандартные интервалы просто неуместны. Это могут быть надписи под картинками и в таблицах, стихи, цитаты, сноски и примечания.
Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row - "разорвать ряд, строку"). Тег
языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.
Тег
не чувствителен к регистру и не требует закрывающего тега, потому что это пустой элемент, но лучше привыкать закрывать все теги. В XHTML тег разрыва должен быть "наглухо закрыт" на обратный слэш.
Пример использования тега разрыва
Тег br в действии < /title></p><p><р> Прогул на службе </р></p><p><p>Еще нигде и никогда <br></p><p>Я не был столь плохим <br></p><p>Начальства алчная орда <br></p><p>Грызет меня живым </р></p><p>Прогул на службе</p><p>Еще нигде и никогда<br>Я не был столь плохим.<br>Начальства алчная орда<br>Грызет меня живым.</p><h2>Атрибут тега <br></h2><p>Единственный атрибут, которым обладает <a href="/scan/osnovnye-html-tegi-html-osnovnye-tegi.html">html тег</a> <br>, называется Он указывает браузеру, как поступить с переносимой строкой, если тексту придется обтекать так называемый плавающий элемент, каковым может быть, например, изображение с атрибутом <a href="/printers-driver/centrovka-po-gorizontali-vyravnivanie-posredstvom-text-align-center-vy-slyshali-o.html">выравнивания align</a>, использующим значения right/left, или блок в CSS, которому прописано свойство float.</p><p>В спецификациях по XHTML 1.0 / HTML 4.01 атрибут clear можно использовать только с Transitional, Frameset и <!DOCTYPE>, иначе код будет нерабочим.</p><h2>Свойства атрибута тега </h2><p>Эффект от применения атрибута clear зависит от его значения и расположения обтекаемого текстом плавающего элемента. Атрибут может принимать 4 значения:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy></p><p>Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, "споткнувшись" о тег <br>, расположится ниже изображения или иного плавающего элемента.</p><p>Точно такой результат получится от использования аргумента all, который ни за что не позволит ни справа, ни слева.</p><p>Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега <br> тексту не останется ничего другого, как обойти изображение, обтекая его справа.</p><p>Значение none ("ни вашим, ни нашим") вообще снимает все полномочия с атрибута clear, и тег <br> молча переносит строку вниз.</p><p>Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.</p><h2>Тег <br> - это мягкий перенос</h2><p>Тег разрыва строки очень удобен для создания необходимых интервалов между абзацами, внутри которых он используется как мягкий перенос, но не как средство для деления текста на абзацы.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy></p><p>Не следует слишком увлекаться тегом перевода строк для форматирования текста, потому что результаты его применения не всегда отличаются изяществом.</p><p>Например, если использовать тег <br> для перевода строк внутри абзаца, это может привести к появлению "гребенки" в окне пользователя, если оно меньше окна, на которое ориентировался веб-мастер.</p>
<p>Свойство white-space
устанавливает, как отображать пробелы между словами. В <a href="/printers-driver/kak-nagret-tachskrin-v-domashnih-usloviyah-kak-obychnyi-monitor.html">обычных условиях</a> любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre> , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
имитирует работу <pre>Но в отличие от него не меняет шрифт на моноширинный.</p><h2>Краткая информация</h2><h2>Обозначения</h2><table><tbody><tr><th>
</th><th>Описание
</th><th style="width: 130px">Пример
</th>
</tr><tr><td><тип>
</td><td>Указывает тип значения.
</td><td><размер>
</td>
</tr><tr><td>A && B
</td><td>Значения должны выводиться в указанном порядке.
</td><td><размер> && <цвет>
</td>
</tr><tr><td>A | B
</td><td>Указывает, что надо выбрать только одно значение из предложенных (A или B).
</td><td>normal | small-caps
</td>
</tr><tr><td>A || B
</td><td>Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
</td><td>width || count
</td>
</tr><tr><td>
</td><td>Группирует значения.
</td><td>[ crop || cross ]
</td>
</tr><tr><td>*
</td><td>Повторять ноль или больше раз.
</td><td>[,<время>]*
</td>
</tr><tr><td>+
</td><td>Повторять один или больше раз.
</td><td><число>+
</td>
</tr><tr><td>?
</td><td>Указанный тип, слово или группа не является обязательным.
</td><td>inset?
</td>
</tr><tr><td>{A, B}
</td><td>Повторять не менее A, но не более B раз.
</td><td><радиус>{1,4}
</td>
</tr><tr><td>#
</td><td>Повторять один или больше раз через запятую.
</td><td><время>#
</td>
</tr></tbody></table>×
<h2>Значения</h2><p>normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br>
переносит текст на <a href="/laptops/kak-pereiti-na-novuyu-stroku-v-html-razryv-stroki-v-html-ispolzuem-teg-br.html">новую строку</a>. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена <a href="/linux/kak-ubrat-mercayushchie-polosy-na-monitore-gorizontalnye-polosy-na-monitore.html">горизонтальная полоса</a> прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку. </p><p>Действие значений на текст представлено в табл. 1.</p><h2>Пример</h2><p><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>white-space
Пример
Великая теорема Ферма
X n
+ Y n =
Z n
где n - целое число > 2
