一般情况下一行文字在一定区域显示的话如果不限定高度，那么在内容超过的宽度的话就会换行显示，为了页面的美观，目前的通用做法就是在最后显示…，然后鼠标悬浮显示完整内容，具体设置如下:
height: 40px;
overflor: hidden;
text-overflow: ellipsis;
white-space: nowrap;超出部分显示…
主要就是这四个属性，按顺序分别是：1、要有固定高度 2、超出部分隐藏 3、显示… 4、文本不换行
如果是vue项目,如果你的组件库是使用的element-ui，那么可以结合tooltip组件来实现这种效果。不过需要先计算出正常显示效果后再通过设置某个dom的textOverflow的true和false，来控制tooltop的显示与隐藏。
function handleStyle (dataList, dom, limitedHeight, _this) {let ele = document.querySelectorAll(dom)for (let index = 0; index < ele.length; index++) {let element = window.getComputedStyle(ele[index])if (parseInt(element.height) > limitedHeight) {_this.$set(dataList[index], 'textOverflow', true)}}
}// 等dom渲染完成后再计算某个dom在大于某个高度后是否需要显示tooltip
this.$nextTick(()=>{handleStyle(this.list, ".item", 43, this)})原文：
文字超出显示点点点之ellipsis 设置www.dsiab.com
![[BZOJ1502]月下柠檬树(自适应辛普森积分)](https://www.lydsy.com/JudgeOnline/upload/201802/111.png)
