zoukankan      html  css  js  c++  java
  • css文本超出长度用省略号显示

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

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

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

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

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

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

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

    以下为主要代码:

    overflow:hidden;white-space: nowrap;text-overflow: ellipsis;
        <style>  .overflow{width:220px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}  </style>  
        <div>  
        欢迎来到博客园,请记住我们的网址cnblogs.com
        </div>  
        <div class="overflow">  
        欢迎来到博客园,请记住我们的网址cnblogs.com
        </div>  

    结果

    欢迎来到博客园,请记住我们的网址cnblogs.com
    欢迎来到博客园,请记住我们的网址cnbl...

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

    文章源自http://www.santii.com/article/17.html

  • 相关阅读:
    mint17上建立lamp环境
    iptables开始ftp
    查看mysql集群状态是否正常
    限制SSH访问源,禁止4A之外的地址跳转访问
    查看cpu、内存和硬盘
    降kipmi0的CPU
    更改密钥对
    eNSP
    划分分区GPT11
    修改虚机IP
  • 原文地址:https://www.cnblogs.com/startend/p/7809976.html
Copyright © 2011-2022 走看看