css 文字换以超出胜率

最新推荐文章于 2024-10-12 09:29:40 发布

原创最新推荐文章于 2024-10-12 09:29:40 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS实现文本的优雅溢出显示及靠右对齐，包括使用text-overflow、white-space和overflow属性来处理文本溢出，以及通过text-align属性实现文本的对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<style> 
	.a{
		height: 30px;
		width: 200px;
		border: 1px solid #000;
		text-overflow: ellipsis; /* 文本溢出显示省略标记 是一种生声明需要配合下面俩个属性才能生效*/
		white-space:nowrap; /*强制文本一行显示*/
		overflow: hidden; /*溢出隐藏*/
	}
	.b{
		height: 50px;
		width: 200px;
		border: 1px solid #000;
		
		/*文本换行 靠右显示*/
		text-align: right;
	}
</style> 
</head> 
<body> 
	<div class="a">阿斯达所大大多撒所大所多阿斯达所大</div>
	
	<div class="b">阿斯达所大大多撒所大所多阿斯达所大</div>
	
</body> 
</html>