calc()
函数属于CSS3版本内容,用于动态计算长度值。
例如:width: calc(100% - 10px);需要注意的是,运算符前后都需要保留一个空格。
calc()函数支持 “+”, “-”, “*”, “/” 运算;
举例,给一个div动态设置宽度如下:
#divBox {
position: absolute;
left: 50px;
width: calc(100% - 100px:
)
vh,是指css中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度。
视口比例长度定义了相对于视口的长度大小,这是文档的可见部分。
通俗点讲,vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%;
text-overflow:ellipsis
1.语法:text-overflow:clip|ellipsis
默认值:clip;
适用于:所有元素
clip:当前对象内文本溢出时不显示省略标记(…),而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(…)。
当然这还是不够的,需要加点调料才能出现效果:
那就是配合
overflow:hidden;
white-space:overflow;
2.一行省略怎么行,变成三行出现省略。
处理办法:
将white-space去除,并且加上:
display:-webkit-box;
-webkit-line-clamp: 3/*第几行裁剪*/
-webkit-box-orient:vertical;**
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。
为了实现该效果,它需要组合其他的WebKit属性。 常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis; ,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本
文字在 div 中自动换行
white-space 属性
作用:设置如何处理元素内的空白。
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
word-break 属性
作用:规定自动换行的处理方法。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
overflow 属性
作用:规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
**
::ng-deep作用
**
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。