CSS 文字效果
CSS 文字效果
我们可以对HTML文档中使用的文本应用不同的效果。一些属性可用于在文本上添加效果。
CSS中有一些文本效果属性，如下所示：
word-break
text-overflow
word-wrap
writing-mode
我们一起讨论上面的CSS属性和插图。
word-break
它指定在结尾处应如何断字线。它定义了换行规则。
语法
word-break: normal |keep-all | break-all | inherit ;
此属性的默认值为正常。因此，当我们不指定任何值时，将自动使用该值。
word-break的值
keep-all： 以默认样式将单词打断。
break-all：为了防止单词溢出，它会在字符之间插入分词符。
示例
<!DOCTYPE html>
<html>
<head>
<title>word-break: break-all</title>
<style>
.jtp{
width: 150px;
border: 2px solid black;
word-break: break-all;
text-align: left;
font-size: 25px;
color: blue;
}
.jtp1{
width: 156px;
border: 2px solid black;
word-break: keep-all;
text-align: left;
font-size: 25px;
color: blue;
}
</style>
</head>
<center>
<body>
<h2>word-break: break-all;</h2>
<p class="jtp">
Welcome to the bianchenghao6.com
</p>
<h2>word-break: keep-all;</h2>
<p class="jtp1">
Welcome to the bianchenghao6.com
</p>
</center>
</body>
</html>
word-wrap
CSS word-wrap属性用于中断长字并包装到下一行。此属性用于防止不可破坏的字符串太长而无法容纳在包含框中的溢出。
语法
word-wrap: normal| break-word| inherit ;
值
normal：此属性用于仅在允许的断点处断开单词。
break-word：用于打断牢不可破的单词。
initial：用于将此属性设置为其默认值。
inherit：它从其父元素继承此属性。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.test {
width: 200px;
background-color: lightblue;
border: 2px solid black;
padding:10px;
font-size: 20px;
}
.test1 {
width: 11em;
background-color: lightblue;
border: 2px solid black;
padding:10px;
word-wrap: break-word;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> Without Using word-wrap </h1>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. </p>
<h1> Using word-wrap: break-word; </h1>
<p class="test1"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p>
</center>
</body>
</html>
text-overflow
它指定溢出文本的表示形式，用户看不到它。它向用户发出有关不可见内容的信号。此属性可帮助我们确定是应该剪切文本还是显示一些点（省略号）。
此属性不能单独使用。我们必须对此属性使用
空白：nowrap； 和
溢出：隐藏； 。
空白：nowrap； 和
溢出：隐藏； 。
语法
text-overflow: clip | ellipsis;
属性值
clip：这是剪切溢出文本的默认值。
ellipsis： 此值显示省略号（...）或三个点以显示剪切的文本。它显示在该区域内，减少了文本量。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.jtp{
white-space: nowrap;
height: 30px;
width: 250px;
overflow: hidden;
border: 2px solid black;
font-size: 25px;
text-overflow: clip;
}
.jtp1 {
white-space: nowrap;
height: 30px;
width: 250px;
overflow: hidden;
border: 2px solid black;
font-size: 25px;
text-overflow: ellipsis;
}
h2{
color: blue;
}
div:hover {
overflow: visible;
}
p{
font-size: 25px;
font-weight: bold;
color: red;
}
</style>
</head>
<center>
<body>
<p> Hover over the bordered text to see the full content. </p>
<h2>
text-overflow: clip;
</h2>
<div class="jtp">
Welcome to the bianchenghao6.com
</div>
<h2>
text-overflow: ellipsis;
</h2>
<div class="jtp1">
Welcome to the bianchenghao6.com
</div>
</center>
</body>
</html>
writing-mode
它指定是沿水平方向还是沿垂直方向写入文本。如果书写方向是垂直的，则可以是
从左到右（vertical-lr）或从
从右到左（vertical-rl）。
从左到右（vertical-lr）或从
从右到左（vertical-rl）。
语法
writing-mode: horizontal-tb | vertical-lr | vertical-rl | inherit ;
属性值
horizontal-tb：这是此属性的默认值，其中文本为水平方向并从左侧读取
vertical-rl：它在垂直方向上显示文本，并且从右到左和从上到下读取文本。
vertical-lr：它与vertical-rl类似，但从左到右读取文本。
示例
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border: 2px solid black;
width: 300px;
height: 100px;
}
#tb {
writing-mode: horizontal-tb;
}
#lr {
writing-mode: vertical-lr;
}
#rl {
writing-mode: vertical-rl;
}
</style>
</head>
<center>
<body>
<h1> Example of CSS writing-mode property </h1>
<h2 id="tb"> writing-mode: horizontal-tb; </h2>
<h2 id="lr" style= "height: 300px;"> writing-mode: vertical-lr; </h2><br>
<h2 id="rl" style= "height: 300px;"> writing-mode: vertical-rl; </h2>
</center>
</body>
</html>