Текст CSS/HTML

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

Как выделить другим цветом фрагмент текста CSS

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

Пример

Lorem Ipsum

HTML


<p>Lorem <span class="text-oc">Ipsum</span></p>

CSS


.text-oc{
  color: #ff6247;
}

Текст на всю ширину страницы CSS

Чтобы выровнять текст на всю ширину страницы можно использовать свойство text-align со значением justify. Так текст будет выглядеть гораздо более аккуратно. Для этого можно задать класс для текста и вставлять его там, где необходимо.

Пример

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis.

HTML


<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis.</p>

CSS


.text-justify{
  text-align: justify;
}

Как добавить многоточие к тексту CSS

Для того, чтобы добавить многоточие к строке можно применить свойство text-overflow со значением ellipsis, чтобы многоточие появилось нужно запретить перенос текста с помощью свойства white-space со значением nowrap, а так же скрыть текст за пределами блока с помощью свойства overflow со значением hidden.

Пример

HTML


<p class="text-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue.</p>

CSS


.text-ellipsis {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

Как сделать или запретить перенос текста CSS

Как правило, текст в HTML переносится автоматически, если он не помещается в одну строку, но бывают случаи, когда текст необходимо перенести, или наоборот запретить перенос. Для того, чтобы запретить перенос текста можно использовать свойство white-space со значением nowrap, а для того, чтобы текст переносился можно использовать с свойство word-wrap со значением break-word.

Пример

Lorem Ipsum

HTML


<!-- Перенос слов -->
<p class="text-ex-wrap">Lorem Ipsum</p>
<!-- Запрещаем перенос слов -->
<p class="text-ex-space">Lorem Ipsum</p>

CSS


.text-ex-wrap{
  word-wrap: break-word; /* Перенос слов */ 
}
.text-ex-space{
  white-space: nowrap; /* Запрещаем перенос слов */
}

Всплывающий текст при наведении CSS

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

Пример

HTML


<div class="text-ex-tooltip">
  <p>Lorem Ipsum</p>
  <div class="tooltip-content">
    <p>Lorem ipsum dolor sit amet</p>
  </div> 
</div>

CSS


.text-ex-tooltip {
  position: relative;
}
.text-ex-tooltip .tooltip-content {
  display: none;
  position: absolute;
  background-color: #fff; /* Фон подсказки */
  padding: 0rem 1.2rem; /* Отступы от края */
  top: -20%; /* Позиция подсказки */
  text-align: center;
  font-size: 1rem;
  color: #a8d7e0; /* Цвет текста */
}
.text-ex-tooltip:hover .tooltip-content {
  display: block;
}

Как вывести теги на страницу HTML

Когда необходимо вывести теги на веб-странице, например, для демонстрации HTML-кода используются символы < и >, с помощью которых нужно заменить скобки < и >.При написании тег будет выглядеть как <тег>, как показано на примере.

Пример

HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet</p>
  </body>
</html>