CSS3 - Text
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>
IOWIKI 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">
IOWIKI 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">
IOWIKI 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">
IOWIKI 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">
IOWIKI 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;
}
<上一篇.CSS3 - Shadow
