3行css使文本溢出显示省略号

最新推荐文章于 2023-11-23 16:11:23 发布

迟来的阿牛

最新推荐文章于 2023-11-23 16:11:23 发布

阅读量912

点赞数

文章标签： css

本文链接：https://blog.csdn.net/nightwishh/article/details/90166345

版权

使文本溢出显示省略号

在实际开发中时常因获取到前台的data文字过长超出了div宽度导致页面结构出错
这时就需要把超出的文字省略并显示省略号了

在这里插入图片描述

body代码

<body>
	<div>
		<p>hahahaaahaahahahaa</p>
	</div>
</body>

style代码

<style>
	div{
		width:100px;
		height:50px;
		background-color: red;
	}	
	p{
		overflow:hidden;/* 超出隐藏 */
		white-space:nowrap;/* 强制在同一行显示 */
		text-overflow:ellipsis;/* 省略号 */
	}
</style>

优惠劵

迟来的阿牛

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
3行css使文本溢出显示省略号

使文本溢出显示省略号在实际开发中时常因获取到前台的data文字过长超出了div宽度导致页面结构出错这时就需要把超出的文字省略并显示省略号了 body代码<body> <div> <p>hahahaaahaahahahaa</p> </div></body>style代码<...
复制链接

扫一扫