CSS3包含一些额外的功能,稍后会添加.
text-overflow
自动换行
word-break
CSS3中有以下最常用的属性 :
Sr.No. | Value&说明 |
---|---|
1 |
text-align-last 用于对齐文本的最后一行 |
2 |
text-emphasis 用于强调文字和颜色 |
3 |
text-overflow 用于确定未向用户显示未显示的溢出内容的方式 |
4 |
word-break 用于打破基于单词的行 |
5 |
word-wrap 用于打破行并换行到下一行line |
文本溢出
文本溢出属性确定如何向用户发出未显示的溢出内容的信号.文本溢出的示例示例如下所示 :
<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 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"> 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:打破字; }