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

  • 相关阅读:
    debounce
    react-xiguan
    备忘录
    ie导出问题
    umi 动态路由配置
    tsconfig
    关于vue 和react 中的hash与锚点冲突问题
    lodash
    pyplot绘图
    Numpy实现图像变换
  • 原文地址:https://www.cnblogs.com/startend/p/7809976.html
Copyright © 2011-2022 走看看