解決React中多行文字省略不生效的情況

文字溢位分為兩種情況，一種是單行文字溢位，一種是多行文字溢位。

1. 單行文字溢位顯示省略號

width

: 140px; //寬度必須要加上
white-space
: nowrap; //不換行
overflow
: hidden;
text-overflow
: ellipsis; //省略號「…」隱藏超出範圍的文字
display
: inline-block; //如果不是行內樣式，需要轉成行內樣式

在react專案之中不生效是因為在react編譯後沒有-webkit-box-orient: vertical

import react from

'react'
;import
"./index.less"
export
default
class
extends
react.component
}render()
}

div

p

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

一 單行文字顯示省略號.overflow hidden white space nowrap text overflow ellipsis doctype html html lang zh head meta charset utf 8 style type text css 一般要指定寬度，然後...

一行或多行文字省略

只顯示一行字，多餘顯示點點點代替 overflow hidden white space nowrap text overflow ellipsis 只顯示兩行字 display webkit box overflow hidden text overflow ellipsis word wrap ...

純css實現多行文字省略號顯示

首先傳統的單行文字實現省略號顯示 如下 overflow hidden text overflow ellipsis white space nowrap 注意點 部分低版本瀏覽器需要加上固定寬度才支援text overflow屬性。純css實現多行文字省略號顯示 方法一 text overflow...