zoukankan      html  css  js  c++  java
  • 表格里使用text-overflow后不能隐藏超出的文本的解决方法

      在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap(强制文本在一行内显示)及overflow:hidden(溢出内容为隐藏),也就是要同时有

    { 
    text-overflow:ellipsis或clip; 
    white-space:nowrap; 
    overflow:hidden; 
    } 
    

      如果不想出现省略号,就设定高度(高度为一行文字的高度),同时去掉white-space:nowrap (此方法如果标签是td的话ie8是不兼容的)

    {
         **px;
        height: **px;
        overflow: hidden; 
    }
    

      

      因为之前有用过不少次这个属性,而且用得也都很顺利,所以最近在弄一些table的时候遇到了td内的内容太多而出现换行从而影响整体的美观的问题,所以我想把文本不换行而且让超出的文本能显示为省略号,于是我就很自然的就去用了上面那三属性并且也为td设置了长度和宽度,结果神了奇,一直没把超出的文本内容给换成省略号,尝试排除了各种我觉得有可能的影响后依旧不能解决,于是我只好去google一下,后来终于找到了原因,就是要在table的样式里定义一个属性 table-layout:fixed,综上,要想解决表格里面使用text-overflow后依旧不能隐藏超出的文本的问题,就必须完整的使用下面这些属性 

    td{ 
    text-overflow:ellipsis或clip; 
    white-space:nowrap; 
    overflow:hidden; 
    **px; 
    } 
    table{ 
    table-layout:fixed; 
    } 
    

      也可以在td里面在嵌套一个span或div标签,在该标签上设置

    span{
        display: block;
         **px;
        height: **px;
        white-space: nowrap;
        overflow: hidden; 
        text-overflow: ellipsis;
    }

      还有如果想鼠标移动上去时显示被隐藏的文本内容,还可以设置

    td:hover 
    { 
    text-overflow:inherit; 
    overflow:visible; 
    } 
    

      

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

      

    1、text-overflow: ellipsis; 

    这里的重点样式是  text-overflow: ellipsis; 

    不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

    简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

    我在网上看到有很多人说opera不支持text-overflow,可能因为我用的是最新版本的,已经支持这个属性了,所以没办法测试,不过网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;

    2、white-space

    顺便解释一下white-space的用法

    white-space属性声明建立布局过程中如何处理元素中空白符。(废话一句,这里的空白符应该指我们用键盘敲入的空格或回车,因为用 或<br>无论white-space设置什么都会有空格或回车。)

    下面是wschool上white-space可能的值:

    normal 默认。空白会被浏览器忽略。

    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

    pre-wrap 保留空白符序列,但是正常地进行换行。

    pre-line 合并空白符序列,但是保留换行符。

    inherit 规定应该从父元素继承 white-space 属性的值。

  • 相关阅读:
    HBase with MapReduce (MultiTable Read)
    HBase with MapReduce (SummaryToFile)
    HBase with MapReduce (Summary)
    HBase with MapReduce (Read and Write)
    HBase with MapReduce (Only Read)
    Hbase中的BloomFilter(布隆过滤器)
    HBase的快照技术
    How To Use Hbase Bulk Loading
    Cloudera-Manager修改集群的IP
    Java中的HashSet和TreeSet
  • 原文地址:https://www.cnblogs.com/refe/p/5015211.html
Copyright © 2011-2022 走看看