html文字超過的部分顯示為省略

2021-10-23 11:21:10 字數 835 閱讀 3351

1.單行文字超出省略

實現方式:

overflow: hidden;

white-space: nowrap; /* 文字不會換行 */

text-overflow: ellipsis; /* 顯示省略符號來代表被修剪的文字 */

實現**:

用css實現單行文字的溢位顯示省略號,同學你會嗎/p>

實現效果:

2.多行文字超出省略

實現方式:

display: -webkit-box;  /* 將物件作為彈性伸縮盒子模型顯示 */

-webkit-box-orient: vertical; /* 設定伸縮盒物件的子元素的排列方式為垂直的 */

-webkit-line-clamp: 3; /* 限制在乙個塊元素顯示的文字的行數 */

overflow: hidden;

適用範圍:

因使用了webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端

實現**:

用css實現多行文字的溢位顯示省略號,同學你會嗎?用css實現多行文字的溢位顯示省略號,同學你會嗎?用css實現多行文字的溢位顯示省略號,同學你會嗎?用css實現多行文字的溢位顯示省略號,同學你會嗎

實現效果:

html文字超過部分顯示為省略號

一 單行文字超出 省略 overflow hidden text overflow ellipsis white space nowrap 文字不換行,這樣超出一行的部分被擷取,顯示.二 多行文字溢位 overflow hidden text overflow ellipsis display we...

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

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

顯示文字,超過部分隱藏並使用省略號

在前端寫頁面的時候,經常會遇到文字內容過多,需要將超出範圍的內容用省略號來顯示。overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 方法二 超過一行 這裡css樣式中,必須規定包裹內容的寬度...