CSS3 - 文本

CSS3 包含一些额外的功能，这些功能是后来添加的。

文本溢出
自动换行
断词

CSS3 中有以下最常用的属性 -

先生。	价值与描述
1	文本最后对齐用于对齐文本的最后一行
2	文本强调用于强调文本和颜色
3	文本溢出用于确定如何向用户发出未显示的溢出内容的信号
4	断词用于根据单词换行
5	自动换行用于换行并换行到下一行

文本溢出

text-overflow 属性确定如何向用户发出未显示的溢出内容的信号。文本溢出的示例如下所示 -

现场演示

<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 分词

用于断行，下面的代码显示了断字的示例代码。

现场演示

<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 自动换行

自动换行用于换行并换行到下一行。以下代码将具有示例语法 -

p {
   word-wrap: break-word;
}