截取字符串一般是用js或者后台语言来实现,其实使用css也是可以实现此效果的。
代码实例如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <meta name="author" content="https://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>
- <div id="first";>我们欢迎您,只有奋斗才会有美好的未来</div>
- <div id="second">我们欢迎您,只有奋斗才会有美好的未来</div>
- </body>
- </html>
特别注意的是:不能够省略white-space:nowrap和overflow:hidden,否则截取字符串无效。
总结
以上所述是小编给大家介绍的CSS3截取字符串实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!