📅 最后修改于: 2020-11-05 05:25:24 🧑 作者: Mango
我们可以对HTML文档中使用的文本施加不同的效果。某些属性可用于在文本上添加效果。
使用CSS，我们可以设置Web文档的样式并影响文本。文字效果的属性有助于我们使文字有吸引力且清晰。下面列出了CSS中的一些文本效果属性：
让我们与插图一起讨论上述CSS属性。
它指定单词在行尾应如何打断。它定义了换行规则。
word-break: normal |keep-all | break-all | inherit ;
此属性的默认值为normal。因此，当我们不指定任何值时，将自动使用该值。
keep-all：以默认样式将单词打断。
break-all：为了防止单词溢出，在字符之间插入单词break。
word-break: break-all
word-break: break-all;
Welcome to the javaTpoint.com
word-break: keep-all;
Welcome to the javaTpoint.com
CSS word-wrap属性用于将长单词打断并包装到下一行。当不可破坏的字符串太长而无法容纳在容纳盒中时，此属性用于防止溢出。
word-wrap: normal| break-word| inherit ;normal：此属性仅用于在允许的断点处断开单词。
break-word：用于打断牢不可破的单词。
Init：用于将此属性设置为其默认值。
inherit：它从其父元素继承此属性。
Without Using word-wrap
In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg.
Using word-wrap: break-word;
In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line.
它指定了溢出文本的表示形式，用户看不到它。它向用户发出有关不可见内容的信号。此属性有助于我们确定是应该剪切文本还是显示一些点(省略号)。
此属性不能单独工作。我们必须使用空格：nowrap;和溢出：隐藏；具有此属性。
text-overflow: clip | ellipsis;
clip：这是剪切溢出文本的默认值。
ellipsis：此值显示省略号(…)或三个点以显示剪切的文本。它显示在该区域内，减少了文本量。
Hover over the bordered text to see the full content.
text-overflow: clip;
Welcome to the javaTpoint.com
text-overflow: ellipsis;
Welcome to the javaTpoint.com
它指定文本是沿水平方向还是垂直方向书写。如果写入方向是垂直的，那么它可以是从左到右(vertical-rr)或从右到左(vertical-rl)。
writing-mode: horizontal-tb | vertical-lr | vertical-rl | inherit ;
horizontal-tb：这是此属性的默认值，其中文本为水平方向，并从左到右和从上到下读取。
vertical-rl：它在垂直方向上显示文本，并且从右到左和从上到下读取文本。
vertical-lr：类似于vertical-rl，但是从左到右读取文本。
Example of CSS writing-mode property
writing-mode: horizontal-tb;
writing-mode: vertical-lr;
writing-mode: vertical-rl;