CSS3 - Text

优质

小牛编辑

127浏览

2023-12-01

CSS3包含几个额外的功能，稍后会添加。

text-overflow
word-wrap
word-break

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

Sr.No.	价值和描述
1	text-align-last 用于对齐文本的最后一行
2	text-emphasis 用于强调文字和颜色
3	text-overflow 用于确定未向用户显示未显示的溢出内容的方式
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>
         xnip 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">
         xnip 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">
         xnip 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 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">
         xnip 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">
         xnip 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;
}