How to intercept string using CSS3-CSS Tutorial-php.cn

How to intercept string using CSS3

不言

Release： 2018-06-09 15:37:06

Original

2112 people have browsed it

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>

Copy after login

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!