<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网格布局 + 截断文本</title>
<style>
.box {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'sidebar header header'
'sidebar content content'
'sidebar footer footer';
color: aqua;
}
.box>div {
background: #333;
padding: 10px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
.truncate p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
background: #333;
color: aqua;
}
</style>
</head>
<body>
<!-- 网格布局 -->
<div class="box">
<div class="header">header</div>
<div class="sidebar">
display: grid 启用网格。
grid-gap: 10px 定义元素之间的间距。
grid-template-columns: repeat(3, 1fr) 定义3列大小相同。
grid-template-areas 定义网格区域的名称。
grid-area: sidebar 使元素使用名称为的区域sidebar 。
</div>
<div class="content">
content
<br>
哈哈哈哈哈哈哈哈哈哈哈
</div>
<div class="footer">footer</div>
</div>
<!-- 截断文本 -->
<div class="truncate">
<p>溜溜idf你电脑年可能可能能否公鸡肉你说你好吸烟返回回到那几十年是觉得后进生</p>
<!-- overflow: hidden 防止文本溢出其尺寸(对于块，100 %宽度和自动高度)。
white-space: nowrap 防止文本高度超过一行。
text-overflow: ellipsis 使其在文本超出其维度时以省略号结尾。
width: 200px; 确保元素具有维度，以知道何时获取省略号 -->
</div>
</body>
</html>
网友评论