在实际开发中，无论是移动端还是PC端，文字过长，因为宽度不够，我们需要设置为省略号。文中对文字溢出进行了总结，希望对大家在开发过程中有所帮助。看完本文，你会看到以下几个部分：单行文字溢出多行文字溢出扩展多行文字溢出自定义多行文字溢出高亮多行文字溢出单行文字溢出单行文字溢出display是一个基本的overflowmaximumWidth，显示省略号[1]，效果如图，这个效果可以通过css实现，代码如下：width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:2pxsolidgreenyellow;compatibility一片绿色，基本上所有浏览器都支持多行文字溢出这个效果也可以通过csswidth:100px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;border:2pxsolidgreenyellow;如果您使用display:-webkit-boxwithtext-overflow:ellipsis，文本将以省略号结尾。line-clamp设置文本框显示的行数-orient设置元素的排列但是如果我们输入的内容是英文的，如下图：我们会发现英文并没有如我所愿的显示3行.因为英文不会自动换行，所以我们需要设置一个换行符word-wrap:break-word;//允许长词换行到下一行word-break:break-all;//允许一个词内换行兼容性：此方法不适用于IE浏览器。换个思路，使用定位+伪类方法div{position:relative;line-height:20px;max-height:60px;overflow:hidden;word-break:break-all;}div::after{content:"...";position:absolute;bottom:0;right:0;padding-left:40px;background:-webkit-linear-gradient(left,transparent,#fff55%);background:-o-linear-gradient(right,transparent,#fff55%);background:-moz-linear-gradient(right,transparent,#fff55%);background:linear-gradient(toright,transparent,#fff55%);}使用行高和max-height用来限制显示的行数，word-break是设置英文单词允许单词内换行；直接在::after中使用background:linear-gradient代替background，避免文字显示不全的问题；::after在ie8中不支持，可以使用:after，如果在ie6和7中，::after可以用真实的元素代替。效果如下：兼容也可以使用打包库clamp-js-main[2]npmiclamp-js-mainscript>$clamp(document.getElementById('app'),{clamp:3});效果如下：扩展多行文字溢出后支持多行文字溢出时显示省略号的功能，产品同学发现体验并不友好。如下图，文本在第二行的开头结束，导致第二行变大。部分内容空白，影响美观。因此，产品同学提出了一个新的需求：当文字不超过第x行的一半时，将按照第x-1行溢出显示省略号的方式显示；（第1行除外）当文字超过第x行的一半但文字没有超过第x行时，会正常显示；当文本超出第x行时，将按照第x行溢出显示省略号的方式显示。这需要计算文本的实际宽度来选择使用哪种显示方式。根据查找资料，canvas提供了一个measureText[3]方法，该方法返回一个对象，该对象包含指定的字体宽度，以像素为单位。因此，这个功能可以基于canvas[4]的能力来实现。大致流程图如下图所示。这里最重要的是计算每行可以显示多少文本。这个效果可以使用canvas的measureText方法来实现。代码如下
