css布局--网格布局 + 截断文本

作者: 怪兽别跑biubiubi | 来源:发表于2018-03-23 15:04 被阅读0次

css布局--网格布局 + 截断文本
布局
九宫格拖拽
九宫格拖拽
CSS布局
CSS Grid网格布局
CSS Grid
CSS Grid 网格布局
Grid布局（一）介绍
Grid布局指南

<!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>