css 之單行文字顯示省略和多行文字省略

一、單行文字顯示省略號......

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

doctype html
>
<
html 
lang
="zh"
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
style 
type
="text/css"
>
/*一般要指定寬度，然後給如下四個屬性。 
*/span
style
>
head
>
<
body
>
<
span
>我是單行文字省略我是單行文字省略
span
>
body
>

二、多行文字顯示省略號......

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

doctype html
>
<
html 
lang
="zh"
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
style 
type
="text/css"
>
/*一般要指定寬度，然後給如下四個屬性。 
*/p 
style
>
head
>
<
body
>
<
p>我是多行文字省略我是多行文字省略我是多行文字省略行文字省略行文字省略行文字省略
p>
body
>
html
>

css 單行文字和多行文字超出顯示省略號

單行文字超出顯示省略號 white space nowrap 文字強制不換行 text overflow ellipsis 文字溢位顯示省略號 overflow hidden 溢位的部分隱藏 多行文字超出顯示省略號 overflow hidden webkit line clamp 2 超出兩行 t...

CSS 單行 多行文字溢位顯示省略號

單行文字 overflow hidden text overflow ellipsis white space nowrap 多行文字溢位顯示省略號 css 單行 多行文字溢位顯示省略號css 單行 多行文字溢位顯示省略號css 單行 多行文字溢位顯示省略號css 單行 多行文字溢位顯示省略號css...

css 實現單行 多行文字顯示

1.單行顯示文字，超出顯示省略號，很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示，限制行數，超出顯示省略號，如下實現 width 200px...