css設定文字多餘部分顯示省略號

2022-07-16 12:57:08 字數 509 閱讀 3155

如果只顯示一行,則可以使用以下方法:

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

如果需要顯示多行,在需要設定的元素style中新增以下**:

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

限制在乙個塊元素顯示的文字的行數。

-webkit-line-clamp 是乙個 不規範的屬性(unsupported webkit property),它沒有出現在 css 規範草案中。

為了實現該效果,它需要組合其他外來的webkit屬性。常見結合屬性:

列表中如何只顯示部分文字,多餘的以省略號代替

效果咱就不展示了,字面已經表達很清楚了。首先ie8下面的寫法,很簡單 下面是在需要的列上指向這個樣式即可,例如 如果是ie6,ie7,則上面沒有效果 樣式不變,變的底下,因為asp boundfield最後會變成td,td這東西真是麻煩 先看實現的 cssclass content eval bus...

CSS文字超出部分顯示省略號

overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 white space nowrap 不換行 overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 display web...

CSS實現文字顯示部分內容,多餘文字顯示省略號

1.顯示一行文字內容,多餘的內容用省略號顯示 overflow hidden text overflow ellipsis white space nowrap 2.顯示指定行數的文字,多餘的內容顯示省略號 display webkit box webkit box orient vertical ...