white-space属性
根据MDN的文档,white-space CSS 属性是用来设置元素中的空白的。取值有
normal
文本会自动换行,连续的空白符会被合并,换行符会被当作空白符来处理。nowrap
文本不会自动换行,会溢出显示,直到遇到<br>标签,连续的空白符会被合并。pre
文本不会自动换行,会溢出显示,会保留多个空白符,遇到换行符和<br>标签会换行。这个值能很好地将文本按源代码的文本书写格式原样输出。pre-wrap
会自动换行,连续的空白符会被保留,在遇到换行符或者<br>标签也会换行。pre-line
会自动换行,连续的空白符会被合并,在遇到换行符或者<br>标签会换行。break-spaces
与 pre-wrap的行为相同,但会保留所有空白字符,具体区别可以去MDN文档查看。不同的打字机效果
利用CSS来写一个简单的打字机效果,当white-space属性值不同时可以实现不同效果。
当white-space:值为nowrap时,设置好动画可以实现依次打出字母。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字机</title>
<style>
*{
padding:0px;
margin:0px;
}
body{
width: 100%;
height:100vh;
background-color: #222;
display: flex;
justify-content:center;
align-items:center;
}
.word{
font-family: monospace;
color:#fff;
font-size:15px;
height: 20px;
white-space: nowrap;
overflow: hidden;
width: 630px;
border-right:2px solid white;
animation:show 10s steps(86) 1s normal,
flash 1s steps(86) infinite normal;
}
@keyframes show{
from{
width:0px;
}
to{
width:630px;
}
}
@keyframes flash{
from{
border-right-color: #fff;
}
to{
border-right-color:transparent;
}
}
</style>
</head>
<body>
<p class="word animation">he said, one day you will leave this world behind, so live a life you will remember.
</p>
</body>
</html>
当white-space:值为normal时(默认),由于会进行换行处理,可以实现整个电单词依次打出的效果,会留有空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字机</title>
<style>
*{
padding:0px;
margin:0px;
}
body{
width: 100%;
height:100vh;
background-color: #222;
display: flex;
justify-content:center;
align-items:center;
}
.word{
font-family: monospace;
color:#fff;
font-size:15px;
height: 20px;
white-space: normal;
overflow: hidden;
width: 630px;
border-right:2px solid white;
animation:show 10s steps(86) 1s normal,
flash 1s steps(86) infinite normal;
}
@keyframes show{
from{
width:0px;
}
to{
width:630px;
}
}
@keyframes flash{
from{
border-right-color: #fff;
}
to{
border-right-color:transparent;
}
}
</style>
</head>
<body>
<p class="word animation">he said, one day you will leave this world behind, so live a life you will remember.
</p>
</body>
</html>
中文文本不受影响。