【css】文本溢出处理方式

__Pluto__

于 2024-08-02 10:58:46 发布

阅读量126

点赞数 2

分类专栏： css 前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_49611304/article/details/140867066

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

1、文本溢出省略号处理

2、文本溢出三行省略号处理

3、文本溢出跑马灯（滚动屏）处理

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>【css】文本溢出处理方式</title>
		<style>
			body {
				text-align: center;
			}
			body>div {
				width: 200px;
				margin: 10px 100px;
				border: 1px solid #ccc;
			}
			.ellipsis {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.ellipsis_2 {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			
			.box {
				overflow: hidden;
			}
			.scroll {
				white-space: nowrap;
				display: inline-block;
				animation: scroll_1 8s infinite alternate linear;
			}
			@keyframes scroll_1 {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(calc(-100% + 200px));
				}
			}
		</style>
	</head>
	<body>
		<div class="ellipsis">
			文本溢出省略可以使用 text-overflow 属性来实现，通常与 white-space 和 overflow 属性一起使用。
		</div>
		
		<div class="ellipsis_2">
			文本溢出三行省略文本溢出三行省略文本溢出三行省略文本溢出三行省略文本溢出三行省略
		</div>
		
		<div class="box">
			<div class="scroll">这是一段内容溢出宽度的文本；跑马灯处理：先用 display: inline-block; 获取到文本标签的实际宽度；滚动距离 = 文本宽度 - 父元素宽度</div>
		</div>
	</body>
</html>