移動端常見問題(單行和多行文字溢位省略)

2022-04-02 15:13:06 字數 4234 閱讀 6109

單行文字溢位省略:

給容器新增css樣式:

.text-ellipsis

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

div.text-ellipsis

style

>

head

>

<

body

>

<

div

class

="text-ellipsis"

>

歐派整體櫥櫃定製簡約現代 歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代

如果容器使用了flex布局:

此時單行文字省略會出問題

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

div.text-ellipsis

style

>

head

>

<

body

>

<

div

class

="text-ellipsis"

>

歐派整體櫥櫃定製簡約現代 歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代

解決方法:不能直接一起使用,可以加個span包裹住文字,在span標籤上設定文字溢位隱藏

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

div.text-ellipsis

style

>

head

>

<

body

>

<

div>

<

span

class

="text-ellipsis"

>歐派整體櫥櫃定製簡約現代 歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代

多行文字溢位省略:

這個也是可以實現的,但是相容性不太好,只相容webkit核心的

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

div.multiline-ellipsis

style

>

head

>

<

body

>

<

div>

<

span

class

="multiline-ellipsis"

>歐派整體櫥櫃定製簡約現代 歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代

注意這裡有個坑,那就是父元素高度最好自適應,高度過小或者過大都會崩

高度過小無法顯示完整行數:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

div.multiline-ellipsis

style

>

head

>

<

body

>

<

div

class

="multiline-ellipsis"

>

歐派整體櫥櫃定製簡約現代 歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代歐派整體櫥櫃定製簡約現代

高度過大,在省略號之後還會繼續顯示……

移動端常見問題

1 ios下input為type button屬性disabled設定true,會出現樣式文字和背景異常問題 解決方案 使用opacity 1來解決 2 對非可點選元素如 label,span 監聽click事件,部分ios版本下不會觸發 解決方案 css增加cursor pointer就搞定了 3...

移動端常見問題

1 上下拉動滾動條時卡頓 慢 body 2 禁止複製 選中文字 element 解決移動裝置可選中頁面文字 視產品需要而定 3 長時間按住頁面出現閃退 element 4 iphone及ipad下輸入框缺省內陰影 5 ios和android下觸控元素時出現半透明灰色遮罩 6 active相容處理 7...

移動端常見問題

一.點選穿透 原因 1.touch事件300ms後,觸發click事件 2.混用touch和click會導致點透問題。解決思路 1.不要混用touch和click 2.阻止掉 touch之後的click。解決方案 1.tap後延遲350ms再隱藏mask 2.pointer events mask隱...