Css работа с текстом: Основы стилизирования текста и шрифта — Изучение веб-разработки

Leave a Comment / Css / By /

Работа с текстом в CSS

🗓️ Обновлено: 02.05.2023

💬Комментариев: 0

👁️Просмотров: 209

Каждый, кто сталкивается с CSS, должен понимать, как работают теги и свойства для работы с текстом. На первый взгляд кажется, что это очень просто, но стоит углубиться в вопросы font-weight, и у новичков может возникнуть особенно много вопросов. Рассмотрим детальнее форматирование текста css, и на что нужно обратить внимание.

Основные свойства CSS

CSS  – незаменимый инструмент для оформления страниц, написанных на HTML. Он позволяет разграничить содержание веб-страницы от элементов ее оформления. В каскадных таблицах стилей достаточно много свойств, но действительно значимых не так уж и много. Их всех объединяет простой синтаксис в виде показателей *свойство: значение”, которые располагаются внутри фигурных скобок нужного селектора. Вот примеры основных свойств, которые используются каждый день для работы с текстом CSS:

  1. font-size. Используется для изменения размера шрифта.
    Высота букв может задаваться константами, пунктами, пикселями, процентами и другими соотношениями.
  2. color. Определяет цвет текста. Его можно установить, написав после двоеточия зарезервированное или шестнадцатеричное название цвета, RGB значение.
  3. background-color. Заливает нужный участок текста цветом, словно он выделен маркером. Варианты значений для background-color аналогичны со свойством color.
  4. font-style. Этим свойство задается стиль шрифта в зависимости от выбранного значения, который может принимать значение обычного, курсивного или наклонного (и отличающегося от курсивного) написания.
  5. font-weight. С этим свойством можно не волноваться, как изменить жирность шрифта в CSS. Значение можно задать двумя способами. Первый – буквенное, чаще всего используется обычное (нормал) и полужирное (болд). Второй способ – числовой, 100-900, чем цифра выше, тем более жирное начертание.
  6. font-family. Определяет список шрифтов, которые будут использоваться при стилизации текста.
    Могут использоваться как названия шрифтов, так и названия групп шрифтов.

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

CSS – теги для текста

Для форматирования текста существует много различных тегов CSS. Расстояние между буквами определяется свойством letter-spacing. Значение можно задавать в пикселях, дюймах, пунктах и других вариантах. Допускается даже отрицательное значение, но предварительно нужно убедиться, что текст получается читабельным.

Также полезным будет text-align. Этот тег выравнивает текст в зависимости от указанного значения:

  • left;
  • center;
  • right;
  • justify.

Последний отвечает за выравнивание по ширине строки. При этом тег line-height нужен для того, чтобы задать высоту нашей строчки, а padding и margin – для формирования отступов вокруг элемента.

Хотите знать больше про CSS? Как работать с каскадными таблицами, чтобы у веб-сайтов и приложений получался удобный и красивый дизайн? На эти и другие вопросы вы сможете получить ответы в Компьютерной школе Hillel.

По материалам: https://itwiki.dev/ru

Учебник CSS. Стиль текста.

Глава 2

В этой главе пойдет речь о том, что можно сделать с текстом, применяя к элементам HTML содержащие в себе некий текст те или иные свойства CSS.

Ну поехали..

Если Вы помните, из курса HTML, для того что бы выровнять текст, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align(выравнивание) и одно из его возможных значений

center(по центру)

Запись имела такой вид:

<p align=»center»>текст по центру</p>

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

text-align (так же как и htmlловский атрибут align) имеет следующие значения:

  • left — Выровнять текст по левому краю элемента (по умолчанию).
  • right — Выровнять текст по правому краю.
  • center — Выровнять текст по центру.
  • justify — Выровнять текст по обоим краям.

Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:

<p>текст по центру </p>

— это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.

А вот в примере ниже используется тег <style> в заголовке документа:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Выравнивание текста</title>
<style type=»text/css»>
h2 { text-align: center }
p { text-align: justify }
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году.
Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>
</body>
</html>

смотреть пример  

Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста.

Возможные значения:

  • blink — Текст будет мигать.
  • line-through — Делает текст перечеркнутым.
  • overline — Надчёркивание текста.
  • underline — Подчеркивание текста.
  • none — Текст без оформления.

Пишется так:

<a href=»index. html»>Ссылка без подчёркивания</a>

Пример:

Файл mystyle.css

h2 {text-align: center}
h4 {text-align: left; text-decoration: underline}
a {text-decoration: underline}
a:hover {text-decoration:none}
p {text-align: justify}

Файл index.html

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Оформление текста</title>
<link rel=»stylesheet» href=»mystyle.css» type=»text/css»>


</head>
<body>
<h4>Меню:</h4>
<a href=»index.html»>Всё о слонах.</a><br>
<a href=»elephant.html»>Купить слона.</a>
<hr>
<h2>Всё о слонах</h2>
<p> Слон — самое крупное … … …</p>
<p>Слоны являются … … …</p>
</body>
</html>

смотреть пример  

Обратите внимание на внешний файл CSS в нем мы «декорировали» ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание

a:hover {text-decoration:none}

Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться «живым».

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

Свойство text-indent — задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает «красную строку».

Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.

В примере ниже расстояние отступа от левого края задаётся в пикселях

(px):

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Красная строка</title>
<style type=»text/css»>
h2 {text-align: center}
p {text-align: justify; text-indent: 20px}
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>

</body>
</html>

смотреть пример  

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

Значения:

  • none — Текст отображается без каких-либо изменений.(по умолчанию)
  • capitalize — Каждое слово в тексте отображается с заглавного символа.
  • lowercase — Все символы преобразуются в нижний регистр.
  • uppercase — Все символы преобразуются в верхний регистр.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Трансформация текста</title>
</head>
<body>
<p>союз советских социалистических республик</p>
<p>СССР ссср</p>
<p>ссср СССР</p>
</body>
</html>

смотреть пример  

Вертикальное выравнивание текста в строке устанавливает свойство vertical-align

Возможные значения свойства vertical-align:

  • baseline — Выравнивает базовую линию элемента по базовой линии родителя.
  • bottom — Выравнивает элемент по нижней части строки.
  • middle — Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
  • sub — Нижний индекс (размер шрифта не меняется).
  • super — Верхний индекс (размер шрифта не меняется).
  • text-bottom — Нижняя граница элемента выравнивается по нижнему краю строки.
  • text-top — Верхняя граница элемента выравнивается по верхнему краю строки.
  • top — Выравнивает элемент по верхней части строки.

Базовая линия — это линия, на которой располагаются «сидят» символы в текстовой строке, Например буква «А» сидит прямо на этой линии, а вот строчная буква «у» сидит на ней же, но свесив ноги..

Взгляните на рисунок с разметкой строки:

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Вертикальное выравнивание текста</title>
</head>
<body>
<font size=»+3″>А и Б </font>
<span>сидели на трубе </span>
<span>А упало </span>
<span>Б пропало.. </span>
<span>что осталось на трубе?</span>
<hr>
формула воды: H<span>2</span>O
<hr>
<span>н</span>
<span>а</span>
<span>и</span>
<span>с</span>
<span>к</span>
<span>о</span>
<span>с</span>
<span>о</span>
<span>к</span>
</body>
</html>

смотреть пример  

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

Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

Может иметь следующие значения:

  • normal — текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
  • nowrap — запрещает автоматический перенос строки.
  • pre — показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<p>
Слон.

Дали туфельки слону.
Взял он туфельку одну
И сказал: — Нужны пошире,
И не две, а все четыре!

С. Я. Маршак.
</p>
<hr>
<p>
Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали?
</p>
</body>
</html>

смотреть пример  

При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>

Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.

Значения:

  • normal — Нормальное расстояние. (по умолчанию)
  • px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Расстояние между словами</title>
</head>
<body>
<p align=»left»>Расстояние между словами равно десяти пикселям</p>
<p align=»left»>Расстояние между словами может иметь отрицательное значение</p>
</body>
</html>

смотреть пример  

А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:

  • normal — Нормальное расстояние. (по умолчанию)
  • px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Расстояние между символами</title>
</head>
<body>
<p>Расстояние между буковками равно пяти пикселям</p>
<p>А здесь буквы, из за отрицательного значения, будут наплывать друг на друга</p>
</body>
</html>

смотреть пример  

Интерлиньяж — это расстояние между строками текста.

Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:

  • normal — Норма (по умолчанию).
  • % — Проценты. за сто процентов берется высота шрифта
  • 0.5 — Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 — двойному.
  • px — Пиксели и любые другие единицы измерения, принятые в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Интерлиньяж</title>
</head>
<body>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
</body>
</html>

смотреть пример  

  • При декорировании текста, свойство — text-decoration, будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.

  • А Вам точно нужно использовать значение nowrap свойства white-space, запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..

  • Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.


Стилизация текста в CSS

Введение

 

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

 

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

 

Что такое работа с текстом CSS?

 

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

 

Что мы будем освещать?

  • цвет
  • текстовое украшение
  • преобразование текста
  • тень текста
  • выравнивание текста
  • отступ текста
  • высота строки
  • межбуквенный интервал
  • межсловный интервал
  • направление
  • пробел

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

 

Пример исходного кода

  1.   
  2.   
  3.   
  4. <голова>  
  5.       
  6.       
  7.     Документ  
  8.       
  9.   
  10.   
  11. <тело>  
  12.     <дел>  
  13.         

      

  14.             Pariatur nostrud magna duis officia veniam.
  15.             In amet esse fugiat ea eu cillum.
  16.             Nisi elit consectetur proident exertation.
  17.             Esse non commodo cillum exercitation proident Lorem commodo consectetur eu tempor pariatur nostrud duis.
  18.         

      
  19.     
  
  •   
  •   
  •   
    • Как видите, в нашем примере мы определили основные стили для страницы и раздела div, где будут происходить манипуляции с текстом. Более того; Я создал его таким, чтобы мне было легко показать скриншот для этой статьи. Помните, что основная тема — манипулирование текстом, и результат будет внутри поля.

     

    Вывод исходного кода

     

     

    Свойство CSS color

     

    Это свойство фактически устанавливает основной цвет элемента. с текст. Его можно определить разными способами, например, с помощью ключевого слова цвета (синий, красный и т. д.), RGB и HSL. Для получения дополнительной информации об этом, пожалуйста, нажмите на эту ссылку.

     

    Давайте сразу рассмотрим пример и сделаем цвет текста немного серым.

    1. п {  
      2. цвет
    2. : #7f7c97;
    3.   
    4. }  
    Output

     

     

    Свойство CSS text-decoration

     

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

     

    Обычно используются следующие значения:

    • нет (без оформления),
    • подчеркивание
    • надчеркивание (строка над текстом)
    • line-through (через строку текста)

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

    1. п {  
    2.     цвет: #7f7c97;
    3.     text-decoration: подчеркивание;
    4.     text-decoration-style: solid;
    5.     text-decoration-color: красный;
    6. }     

    Еще одна вещь, которую следует отметить, свойство text-decoration также является сокращением для строки text-decoration, text-decoration-color, text-decoration-style. Таким образом, вы также можете использовать тот же код, что и ниже.

    1. п {    
    2.     цвет: #7f7c97;
    3.     text-decoration:underline red solid;
    4. }   

    Вывод

     

     

    Свойство CSS text-transform

     

    Иногда вам может понадобиться изменить регистр текста с помощью этого свойства.

     

    Обычно используются следующие значения:

    • нет (текст не преобразуется)
    • сделать заглавными (заменить первую букву каждого слова на заглавную)
    • верхний регистр (изменить весь текст на верхний регистр)
    • нижний регистр (перевести весь текст в нижний регистр) 

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

    1. п {  
    2.     цвет: #7f7c97;
    3.     текстовое преобразование: верхний регистр;
    4. }    
    Output

     

     

     

    Свойство CSS text-shadow

     

    Иногда нам нужно добавить тень к нашему тексту, и использование этого свойства позволяет вам это сделать.

     

    Это свойство text-shadow принимает три значения

    • Первое значение представляет смещение по горизонтали  (насколько тень находится справа от текста, отрицательное значение слева).
    • Второе значение представляет смещение по вертикали (насколько далеко тень от нижнего края текста, отрицательное значение — вверху).
    • Третье и последнее значение — размытие тени.

    В нашем примере попробуем сделать его немного кровавым.

    1. п {  
    2.     цвет: #7f7c97;
    3.     text-shadow: 2px 2px 8px #FF0000;
    4. }     
    Выход

     

     

     

    Свойство CSS text-align

     

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

     

    Часто используемые значения:

    • слева (текст будет выровнен по левому краю)
    • вправо (текст будет выровнен по правому краю)
    • по центру (текст будет по центру)
    • по ширине (текст будет по ширине)
    В нашем примере попробуем сделать текст центрированным.

    1. р {  
    2.     цвет: #7f7c97;
    3.     текстовое выравнивание: по центру;
    4. }     
    Output

     

     

     

    Свойство CSS text-indent

     

    Это свойство применяет отступ к первой строке текста в блочном контейнере, используя любую единицу длины, например 90 363 пикселя и ems , или процента относительно ширины содержащего блока.

    1. р {  
    2.     цвет: #7f7c97;
    3.     текстовый отступ: 200 пикселей; /*Сделан немного больше, чтобы было видно*/  
    4. }     
    Вывод

     

     

    Свойство CSS line-height

     

    Это свойство определяет минимальную высоту строки текста внутри элемента. Вы можете указать единицу длины, процент или число.

     

    В нашем примере давайте увеличим его вдвое.

    1. р {  
    2.     цвет: #7f7c97;
    3.     line-height: 2em;
    4. }     

    Вывод

     

     

     

    Свойство CSS letter-spacing

     

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

     

    В нашем примере давайте сделаем расстояние между буквами не менее 10 пикселей.

    1. п {  
    2.     цвет: #7f7c97;
    3.     letter-spacing: 10px;
    4. }   
    Output

     

     

    Свойство CSS word-spacing

     

    Это свойство управляет расстоянием между словами. Начальное значение normal представляет пробел по умолчанию между словами.

     

    В нашем примере попробуем настроить расстояние между словами.

    1. р {  
    2.     цвет: #7f7c97;
    3.     интервал между словами: 15 пикселей;
    4. }  
    Output

     

     

     

    CSS direction Свойство

     

    Это свойство определяет направление текста. Кажется, легко понять. Начальное значение ltr означает слева направо.

     

    Часто используемые значения,

    •  лтр (слева направо)
    • rtl (справа налево)

    В нашем примере попробуем сделать направление справа налево.

    1. п {  
    2.     цвет: #7f7c97;
    3.     направление: rtl;
    4. }    
    Output

     

     

     

    Свойство CSS white-space

     

    Это свойство определяет пустое пространство внутри обрабатываемого элемента.

     

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

    1. п {  
    2.     цвет: #7f7c97;
    3.     пробел: предварительный перенос;
    4. }   
    Вывод

     

     

     

    Резюме

     

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

     

    В этой статье мы обсудили следующие свойства работы с текстом CSS:

    • цвет
    • текстовое украшение
    • преобразование текста
    • тень текста
    • выравнивание текста
    • отступ текста
    • высота строки
    • межбуквенный интервал
    • межсловный интервал
    • направление
    • пробел

    Надеюсь, вам понравилась эта статья, как мне понравилось ее писать. До следующего раза, удачного программирования!

     

    Ссылки

    • Начало CSS: каскадные таблицы стилей для веб-дизайна
    • Основы CSS3, первое издание

    Текстовые эффекты CSS — javatpoint

    следующий → ← предыдущая

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

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

    • разрыв слова
    • переполнение текста
    • перенос слов
    • режим записи

    Давайте обсудим приведенные выше свойства CSS вместе с иллюстрациями.

    разрыв слова

    Указывает, как слова должны разрываться в конце строки. Он определяет правила разрыва строки.

    Синтаксис

    слово-разрыв: нормальный | сохранить все | ломать все | наследовать ;

    Значение по умолчанию для этого свойства — нормальное. Таким образом, это значение используется автоматически, когда мы не указываем никакого значения.

    Значения

    keep-all: Разбивает слово в стиле по умолчанию.

    break-all: Вставляет разрыв слова между символами, чтобы предотвратить переполнение слова.

    Пример

    <голова>разрыв слова: разбить все <стиль> .jtp{ ширина: 150 пикселей; граница: 2px сплошной черный; слово-разрыв: разбить все; выравнивание текста: по левому краю; размер шрифта: 25px; цвет синий; } .jtp1{ ширина: 156 пикселей; граница: 2px сплошной черный; Word-break: сохранить все; выравнивание текста: по левому краю; размер шрифта: 25px; цвет синий; } <центр> <тело>

    разрыв слова: разбить все;

    Добро пожаловать на javaTpoint.com

    word-break: сохранить все;

    Добро пожаловать на javaTpoint. com

    Протестируйте сейчас

    перенос слов

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

    Синтаксис

    перенос слов: обычный| ключевое слово| наследовать ;

    Значения

    нормальный: Это свойство используется для разрыва слов только в разрешенных точках разрыва.

    break-word: Используется для разбиения неразрывных слов.

    начальный: Используется для установки для этого свойства значения по умолчанию.

    inherit: Он наследует это свойство от своего родительского элемента.

    Пример

    <голова> <стиль> .тест { ширина: 200 пикселей; цвет фона: голубой; граница: 2px сплошной черный; отступ: 10 пикселей; размер шрифта: 20px; } . тест1 { ширина: 11см; цвет фона: голубой; граница: 2px сплошной черный; отступ: 10 пикселей; перенос слов: прерывание слова; размер шрифта: 20px; } <тело> <центр>

    Без переноса слов

    В этом абзаце есть очень длинное слово: яооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо поооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо…

    Использование переноса слов: break-word;

    В этом абзаце есть очень длинное слово: яооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо поооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо… Длинное слово будет разорвано и перенесено на следующую строку.

    Протестируйте сейчас

    переполнение текста

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

    Это свойство не работает само по себе. Мы должны использовать пробела: nowrap; и переполнение: скрыто; с этим свойством.

    Синтаксис

    переполнение текста: клип | многоточие;

    Значения свойств

    clip: Это значение по умолчанию, которое обрезает переполненный текст.

    многоточие: Это значение отображает многоточие (…) или три точки для отображения обрезанного текста. Он отображается внутри области, уменьшая объем текста.

    Пример

    <голова> <стиль> .jtp{ пробел: nowrap; высота: 30 пикселей; ширина: 250 пикселей; переполнение: скрыто; граница: 2px сплошной черный; размер шрифта: 25px; переполнение текста: клип; } . jtp1 { пробел: nowrap; высота: 30 пикселей; ширина: 250 пикселей; переполнение: скрыто; граница: 2px сплошной черный; размер шрифта: 25px; переполнение текста: многоточие; } h3{ цвет синий; } раздел:наведите { переполнение: видимое; } п{ размер шрифта: 25px; вес шрифта: полужирный; красный цвет; } <центр> <тело>

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

    переполнение текста: клип;

    <дел> Добро пожаловать на javaTpoint.com

    переполнение текста: многоточие;

    <дел> Добро пожаловать на javaTpoint.com

    Протестируйте сейчас

    режим записи

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *