Home > Article > Web Front-end > How to intercept string using CSS3
How to intercept string using CSS3
- 不言Original
- 2018-06-09 15:37:062043browse
Intercepting strings is generally implemented using js or background language. In fact, this effect can also be achieved using CSS. The following is an example code to introduce to you the CSS3 method of intercepting strings. Friends who need it can refer to it
Intercepting strings is generally implemented using js or a background language. In fact, this effect can also be achieved using CSS.
Code examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>CSS教程-脚本之家</title>
<style type="text/css">
#first{
width:120px;
height:30px;
background-color:#F30;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
}
#second{
width:120px;
height:30px;
background-color:#F30;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-top:10px;
}
</style>
</head>
<body>
<p id="first">脚本之家欢迎您，只有奋斗才会有美好的未来</p>
<p id="second">脚本之家欢迎您，只有奋斗才会有美好的未来</p>
</body>
</html>Special note: white-space:nowrap and overflow:hidden cannot be omitted, otherwise the intercepted string will be invalid.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Using pure CSS to achieve dynamic text effects
CSS
Text font color setting method (CSS color)
The above is the detailed content of How to intercept string using CSS3. For more information, please follow other related articles on the PHP Chinese website!