Учебники

CSS3 — Текст

Сентябрь 21, 2018

CSS3 содержит несколько дополнительных функций, которые добавляются позже.

  • текст переполнения
  • перенос слова
  • слово-брейк

Следующее наиболее часто используемое свойство в CSS3 —

Sr.No. Значение и описание
1

выравнивания текста, последние

Используется для выравнивания последней строки текста

2

текст предыскажений

Используется для выделения текста и цвета

3

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

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

4

слово-брейк

Используется для разрыва строки на основе слова

5

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

Используется для разрыва строки и переноса на следующую строку

выравнивания текста, последние

Используется для выравнивания последней строки текста

текст предыскажений

Используется для выделения текста и цвета

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

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

слово-брейк

Используется для разрыва строки на основе слова

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

Используется для разрыва строки и переноса на следующую строку

Text-перелив

Свойство text-overflow определяет, как переполненный контент, который не отображается, сигнализируется пользователям. Пример примера переполнения текста показан ниже:

Live Demo

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>

   <body>
   
      <b>Original Text:</b>
   
      <p>
         Tutorials Point originated from the idea that there exists a class of 
         readers who respond better to online content and prefer to learn new 
         skills at their own pace from the comforts of their drawing rooms.
      </p>
      
      <b>Text overflow:clip:</b>
   
      <p class = "text1">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of their 
         drawing rooms.
      </p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Это даст следующий результат —

CSS3 ломать слова

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

Live Demo 

<html>
   <head>
      <style>
         p.text1 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: break-all;
         }
      </style>
   </head>

   <body>
   
      <b>line break at hyphens:</b>
      <p class = "text1">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of 
         their drawing rooms.
      </p>
      
      <b>line break at any character</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Это даст следующий результат —

CSS перенос слов

Перенос слов используется для переноса строки и переноса на следующую строку. Следующий код будет иметь пример синтаксиса —

53
Share: