<!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>css布局--网格布局 + 截断文本
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 之前写flex布局基础知识整理提到了网格布局，也大概说了下它与flex布局的区别。 flex只是一维布局（沿横向或...
- 原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者...
- 以下是Oliver Williams的客座帖子。 Oliver一直在使用CSS网格布局，并收获良多。 在这篇文章中...
- （注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。） ...
