【CSS3】将截断的文字可选的显示出来

一.原版本

原版本在文字溢出的时候只做简单的裁剪或者加上截断符号，但被截断的文字就不可查了。

CSS选择器

div {
  border:1px solid #000000;
  height: 80px;
  width: 200px;
}

HTML标签

  overflow:hidden;white-space:nowrap;text-overflow:clip;



  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

效果CUT

完整链接

Link

二.升级版

升级的部分就是既能做到截断溢出的部分，还能在鼠标指针移到截断处的时候将被截掉的部分在范围外显示出来。

网页源码

  
  文字溢出问题
  
    
      div.test{
        white-space:nowrap;
        width:12em;
        overflow:hidden;
        border:1px solid #000000;
      }
      div.test:hover{
        text-overflow:inherit;
        overflow:visible;
      }
    
  
  
    This is some long text that will not fit in thebox
    This is some long text that will not fit in the box
  

演示说明

页面一开始是这样的：

可见，溢出的部分就被截断了。

我们把鼠标移到二者的末尾处：

溢出的文字在范围外显示出来了，这就是我们需要的效果。