zoukankan      html  css  js  c++  java
  • CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块):

    .text-overflow {  

      display:block;/*内联对象需加*/   

      25em;  

      word-break:keep-all;/* 不换行 */   

      white-space:nowrap;/* 不换行 */  

      overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */   

      text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

    }

    对于表格文字溢出的定义:

    对于表格超出范围显示省略号

    table{  

       25em;  

       table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */

    }

    td{

      100%;  

      word-break:keep-all;/* 不换行 */   

      white-space:nowrap;/* 不换行 */    

      overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

      text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

    }

    如:

    ------------------------------------------------------------------------------------------------

    如果想鼠标悬停省略号显示内容就 在title 那里写好即可~

    代码:

    <style type="text/css">
    #div1{ 
             padding: 10px;
             width: 200px;
             height:30px;
             text-shadow: 3px 3px 3px #aaaaaa;
             border: 1px solid #999999;
             text-overflow: ellipsis;
             overflow: hidden;
             word-break: break-all;
             white-space: nowrap;
             }
    </style>
    
    
    <body>
    <div id="div1" title="AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD">
              AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD
    </div>
    </body>
  • 相关阅读:
    python-单链表的实现
    python-树形结构和遍历
    python四种简单排序
    python数据类型
    python安装和配置
    Js 中的false,零值,null,undefined和空字符串对象
    console和chrom-tool
    js中声明Number的五种方式
    vue下拉搜索
    canvas猜数游戏
  • 原文地址:https://www.cnblogs.com/imwtr/p/4081836.html
Copyright © 2011-2022 走看看