当前位置:Web前端 > > 正文

css3结合js制作(CSS3截取字符串实例代码推荐)

时间:2022-03-30 09:05:10类别:Web前端

css3结合js制作

CSS3截取字符串实例代码推荐

截取字符串一般是用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>
    <li id="first">开心学习网欢迎您,只有奋斗才会有美好的未来</li> 
    <li id="second">开心学习网欢迎您,只有奋斗才会有美好的未来</li> 
    </body>
    </html>
    
  • 特别注意的是:不能够省略white-space:nowrap和overflow:hidden,否则截取字符串无效。

    总结

    以上所述是小编给大家介绍的CSS3截取字符串实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!

    上一篇下一篇

    猜您喜欢

    热门推荐