zoukankan      html  css  js  c++  java
  • 2019年5月21号总结

    css文本超出长度用省略号显示

    当我们制作列表页的时候,一般都是获取文章标题,然后一行一行的显示。

    但是当标题过长的时候,就会造成换行显示。

    虽然我们可以使用overflow:hidden将超过宽度的字符隐藏掉。

    但是结尾看起来总会让人觉得有点僵硬。

    而且也不利于让用户知道后面还有没显示完的字符。

    最好的方法,就是将多余的字符用省略号来代替。

    今天小编带来的就是,使用css让单行文本超出长度的部分用省略号显示。

    以下为主要代码:

     overflow:hidden;white-space: nowrap;text-overflow: ellipsis; 
    1.  
      <style> .overflow{220px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;} </style>
    2.  
      <div>
    3.  
      欢迎来到csdn博客,请记住我们的网址blog.csdn.net
    4.  
      </div>
    5.  
      <div class="overflow">
    6.  
      欢迎来到csdn博客,请记住我们的网址blog.csdn.net
    7.  
      </div>

    结果

    1.  
      欢迎来到csdn博客,请记住我们的网址blog.csdn.net
    2.  
      欢迎来到csdn博客,请记住我们的网址bl...

    以上就是使用css解决文本超出长度用省略号替代的方法,希望对小伙伴们有帮助。

  • 相关阅读:
    Python解释器【转载】
    Python第一行代码
    Hive安装部署
    Python 3.6安装教程
    Spark安装部署
    Code:Blocks中文输出乱码解决方法
    HBase集群安装部署
    Hadoop集群时间同步
    ZooKeeper安装部署
    Linux重置mysql密码
  • 原文地址:https://www.cnblogs.com/zhangjiabing/p/10898742.html
Copyright © 2011-2022 走看看