css布局--網(wǎng)格布局 + 截斷文本

<!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>網(wǎng)格布局 + 截斷文本</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>
  <!-- 網(wǎng)格布局 -->
  <div class="box"> 
    <div class="header">header</div>
    <div class="sidebar">
        display: grid 啟用網(wǎng)格。
        grid-gap: 10px 定義元素之間的間距。
        grid-template-columns: repeat(3, 1fr) 定義3列大小相同。
        grid-template-areas 定義網(wǎng)格區(qū)域的名稱。
        grid-area: sidebar 使元素使用名稱為的區(qū)域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>
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容