一段长文字截取显示部分，其余用省略号...

目录

[TOC]

我们平时也会遇到这种情况吧，当一段文字很长，但是又不能全部显示时，就想只显示部分文字，然后剩下的用省略号代替。鼠标移到上面时，会有全部的文字显示出来。好，接代码吧。

HTML代码

<div class="line" title="html、css、JavaScript、jq、bootstrap、Java、jsp、微信小程序">
     //title属性是实现鼠标移动到上面时，显示对应文字
        <a href="#">
            <nobr>html、css、JavaScript、jq、bootstrap、Java、jsp、微信小程序</nobr>
     //想要显示省略号，要配合使用nobr标签，其他样式见css
        </a>
     </div>
    ......

CSS代码

.line{
        width:200px;   //为包裹的div设置好固定宽高是关键，这里可以自己调整宽度，越短显示字数越少
        height:30px;
        overflow: hidden; //设置溢出的位隐藏
        text-overflow:ellipsis;  //文字溢出的用省略号显示
    }

关键的代码都已经实现好了，还有其他修饰的样式我这里就不列出来了，你们也可以自由发挥哦。