文字超出省略 遮罩層

2021-10-21 17:15:51 字數 1024 閱讀 6842

文字超時顯示…

overflow

:hidden;

text-overflow

:ellipsis;

white-space

:nowrap;

多行內容的時候

overflow

:hidden;

text-overflow

:ellipsis;

display

:-webkit-box;

-webkit-box-orient

:vertical;

-webkit-line-clamp

:2; //顯示的行數

遮罩層樣式:

position

:fixed;

left

:0;top

:0;opacity

:.5;

width

:100%;

height

:100%;

background

:#000000a6;

z-index

:998;

pointer-events

:none;

/*穿透操作*/

width height 百分比

當元素的height、width設定為百分比時,分別基於包含它的塊級物件的高度、寬度。這個是常規百分比的含義。

class

="container"

>

class

="inner"

>

注意這裡div

>

class

="divider"

>

我是分割線div

>

div>

.container

.inner

.divider

css控制文字超出省略

單行文字操作省略 思路 1.設定inline block屬相 2.強制不換行 3.固定高度 4.隱藏超出部分 5.顯示 display inline block white space nowrap width 100 overflow hidden text overflow ellipsis 多...

文字超出省略隱藏及文字換行

div 要知道css的三條基礎屬性,只能顯示一行。屬性描述 overflow hidden 超出的文字隱藏。text overflow ellipsis 溢位用省略號顯示。white space nowrap 溢位不換行。css3屬性,顯示多行。屬性描述 display webkit box 將物件...

文字超出省略號型別

overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行overflow hidden text overflow ellipsis display webkit box 作為彈性伸縮盒子模型顯示...