关注我们

CSS3 - 文字属性(Text)

CSS3包含一些额外的函数

text-overflow(文字溢出)
word-wrap(自动换行)
word-break(单词换行)

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

Sr.No.	Value & Remark
1	text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
2	text-emphaasis 向元素的文本应用重点标签以及重点标签的前景色
3	text-overflow 链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-text.html 来源：LearnFk无涯教程网规定当文本溢出包含元素时发生的事情无涯教程网
4	word-break 规定非中日韩文本的换行规则
5	word-wrap 规定文本的换行规则。

文字溢出(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>
         Learnfk 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">
         Learnfk 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">
         Learnfk 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>

它将产生以下输出-

单词换行(Word Breaking)

规定非中日韩文本的换行规则，下面的代码显示了用于断行的示例代码。

复制代码

<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">
         Learnfk 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">
         Learnfk 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>