使用css实现文字超过div宽度显示省略号

mini云码 发布日期： 2025-11-03 12:48

平时我们做界面展示的时候，经常会遇到一个问题，内容是用户输入的，但是我们不知道用户输入的内容的长度，而我们UI设计的宽度有限，装不下这么多的字。

这时候我们想当文字超过div宽度的时候，自动显示省略号，而把鼠标放上去的时候，才看到完整内容，怎么实现呢？代码如下：

html和css的代码如下：

<style type="text/css">
	.shenglue {
	    width: 300px;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    border: 1px solid #e1e1e1;
	    padding: 10px;
	    background: #f9f9f9;
	}
</style>

<div class="shenglue" title="哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>

这样，就可以看到上传的效果：

div超出的部分显示了带省略号，当我们把鼠标放上去的时候，通过title属性才弹出显示完整的内容。