CSS文字超過2行省略號( )顯示

2022-07-04 06:45:11 字數 528 閱讀 9190

基礎屬性:(只能做到超出一行部分省略號顯示)

width: 200px;  //

寬度overflow: hidden;

//超出文字隱藏

white-space: nowrap; //

不換行,只顯示一行

text-overflow: ellipsis; //

超出部分省略號顯示

css3屬性:(可做到超出 n 行部分省略號顯示,行數可自定義)

width: 200px;  //

寬度overflow:hidden;

//超出文字隱藏

text-overflow:ellipsis; //

/超出部分省略號顯示

display:-webkit-box; //

彈性盒模型

-webkit-box-orient:vertical; //

上下垂直

-webkit-line-clamp:4; //

自定義行數

css 文字超出2行顯示省略號

首先,要知道css的三條屬性。overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 這三個是css的基礎屬性,需要記得。但是第三條屬性,只能顯示一行,不能用在這裡,那麼如果顯示多行呢?css3...

css超過顯示省略號

1 style 2div 8style white space 設定如何處理元素內的空白,所有瀏覽器都支援 normal 預設。空白會被瀏覽器忽略。pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到 標籤為止。pre wrap ...

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

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title html,body width 1000px padding 50px 30px margin 50px auto b...