一、多行省略
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;
值 | 描述 |
---|---|
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;
值 | 描述 |
---|---|
clip | 修剪文本。 |
ellipsis | 显示省略符号来代表被修剪的文本。 |
string | 使用给定的字符串来代表被修剪的文本。 |
white-space属性:
设置如何处理元素内的空白。
white-space: normal|nowrap|pre|pre-wrap|pre-line|inherit
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
三、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)
}