CSS知识点集锦

最新推荐文章于 2024-10-07 21:54:14 发布

Sunny2011111

最新推荐文章于 2024-10-07 21:54:14 发布

阅读量2.7k

点赞数 1

分类专栏：前端文章标签： CSS

本文链接：https://blog.csdn.net/Sunny2011111/article/details/79817707

版权

一、文本显示固定行数，多余的省略
1、文本只显示一行

<style type="text/css">
    .text {
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: solid red 1px;
    }
 </style>
<div class="text">
  《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。
</div>

2、文本显示多行（必须在visibility: visible; 且节点不设置高度的情况下才生效）

<style type="text/css">
    .text {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;    
    }
 </style>
<div class="text">
  《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。
</div>

3、父div中嵌套块级元素

<style type="text/css">
    .parent{
      width: 300px;
      border: solid red 1px;
    }
    .children{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    } 
</style>
<div class="parent">
  <div class="children">《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。此外，这首诗也将作者羁旅之思，家国之忧，以及身处乱世尚无归宿的顾虑充分地表现出来，是写愁的代表作。</div>
</div>

4、父div中嵌套行

<style type="text/css">
    .parent{
      width: 300px;
      border: solid red 1px;
    }
    .children{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;    
   }
   或
   .children{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 100%;   
   }
    或
   .children{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
   }
 </style>
<div class="parent">
  <span class="children">《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。此外，这首诗也将作者羁旅之思，家国之忧，以及身处乱世尚无归宿的顾虑充分地表现出来，是写愁的代表作。</span>
</div>

5、div中嵌套块级元素和行内元素

<style type="text/css">
    .parent{
      width: 300px;
      border: solid red 1px;
      display: flex;
      flex-direction: row;
    }
    .children1{
      width: 100px;
      border: solid green 1px;
    }
    .children2{
      flex: 1;
      border: solid blue 1px;
    }
    .parent div{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
</style>
<div class="parent">
  <div class="children1">《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中&