breadleaf.github.io/b.html at main · Breadleaf/breadleaf.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!doctype html>
<html>
	<head>
		<style>
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	background: #f0f0f0;

	display: flex;
	align-items: center;
	justify-content: center;
}

.cards-container {
	transform: skew(20deg, 0deg);

	max-width: 400px;
	min-width: 400px;
}

.card {
	background: linear-gradient(135deg, #89f7fe, #66a6ff);
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	perspective: 1000px;
}

.card p {
	width: 100%;
	min-width: 0;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
		</style>
	</head>
	<body>
		<div class="cards-container">
			<div class="card">
			</div>
			<div class="card">
			</div>
			<div class="card">
			</div>
			<div class="card">
			</div>
		</div>
		<script>
			document.querySelectorAll(".card").forEach(el => {
				const p = document.createElement("p");
				p.textContent = "my really long text ".repeat(20);
				el.appendChild(p);
			});
		</script>
	</body>
</html>