CSS3 — Текст - Берлога

Поділитись

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>

Поділитись