多行省略和选择器

一、多行省略

1】私有属性

如果使用less预处理器，中间的两行注释不能去掉。下面的代码可以实现多行省略。（注意注释的细节）

display: -webkit-box;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;

work-break属性：

属性规定自动换行的处理方法。

word-break: normal|break-all|keep-all;

2】伪元素

p{
    
  height:200px;
  overflow:hidden;
  position:relative;
}

p::before{
    
  content:"...";
  position:absolute;
  right:0;
  bottom:0;
}

p::after{
    
  content:"";
  background:blue;/*注意这个的弊端：伪元素的颜色必须和文字框背景颜色一致*/
  width:1em;
  height:1em;
  position:absolute;
  right:0;
  display:inline;/*伪元素默认是行内元素*/
}

二、单行省略

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

text-overflow属性：

规定当文本溢出包含元素时发生的事情。

text-overflow: clip|ellipsis|string;

white-space属性：

设置如何处理元素内的空白。

white-space: normal|nowrap|pre|pre-wrap|pre-line|inherit

 标签。

三、css选择器

<div class='block'>
  
  <h1 class='title block'>标题1</h1>
  <p class='paragraph'>这是段落1</p>
  <p class='paragraph'>这是段落2</p>
  <p class='paragraph'>这是段落3</p>
  <p class='paragraph'>这是段落4</p>
  
  <div class='block'>
    <p class='paragraph'>这是段落5</p>
    <p class='footer'>这是结尾</p>
  </div>
  
  <div class='block'>
    <p class='paragraph'>这是段落6</p>
  </div>
  
  <div class='block'>
    <p class='paragraph'>这是段落7</p>
    <div>块</div>
  </div>
  
</div>

.title.block{
    
  选择同时拥有title类和block类的元素（标题1）
}

.block .paragraph{
    
  选择title类下的所有paragraph类的元素（段落1、段落2、段落3、段落4、段落5、段落6、段落7）
}

.paragraph,.footer{
    
  选择所有的paragraph类元素以及所有的footer类的元素（段落1、段落2、段落3、段落4、段落5、结尾、段落6、段落7）
}

h1 + p{
    
  选择h1和p是相邻兄弟的p元素（段落1）
}

div > p{
    
  选择p是div下的孩子的p元素（段落1、段落2、段落3、段落4、段落5、结尾、段落6、段落7）
}

p:first-child{
    （条件更苛刻）
  选择所有容器中必须第一个元素是p的p元素（段落5、段落6、段落7）
}

p:first-of-type{
    
  选择所有那些在容器中排在*最前面*的p元素（段落1、段落5、段落6、段落7）
}

p:last-of-type{
    
  选择所有那些在容器中排在*最后面*的p元素（段落4、结尾、段落6、段落7）
}

p:last-child{
    （条件更苛刻）
  选择所有容器中必须最后一个元素是p的p元素（结尾、段落6）
}

p:only-of-type{
    
  选择所有p元素是其父级的*唯一*p元素（段落6、段落7）
}

p:only-child{
    
  选择所有p元素是其父级的唯一子元素（段落6）（条件比上面的only-of-type更为苛刻）
}

p:nth-child(2){
    
  选择所有的p元素是容器中的第二个元素（段落1、结尾）
}

p:nth-last-child(2){
    
  选择所有的p元素是容器中的倒数第二个元素（段落5、段落7）
}

p:nth-of-type(2){
    
  选择所有的p元素是容器中的第二个p元素（段落2、结尾）
}

p:nth-last-of-type(2){
    
  选择所有的p元素是容器中的倒数第二个p元素（段落3、段落5）
}