CSS內容超過寬度顯示省略號

2022-06-25 10:12:10 字數 620 閱讀 7519

實現**

overflow:hidden; //超出的文字隱藏

text-overflow:ellipsis; //溢位用省略號顯示

white-space:nowrap; //溢位不換行

沒效果解決方案:放置文字的元素使用塊級元素 例如 p,div,不要使用 span 等行內元素。

例:

// css

.text

// html

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

文字超過兩行及以上摺疊省略

overflow:hidden;

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

text-overflow:ellipsis;//溢位部分用省略號代替

-webkit-line-clamp:2; //設定文字顯示兩行

-webkit-box-orient:vertical; //從上到下排列子元素;

white-space:normal;

css超過顯示省略號

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

CSS控制的內容超過容器寬度後顯示省略號

text overflow ellipsis屬性在ff中是沒有效果的。同時應用 text overflow ellipsis white space nowrap overflow hidden 實現了所想要得到的溢位文字顯示省略號效果 text overflow是乙個比較特殊的屬性,在css手冊中...

CSS超過指定的寬度加省略號

table layout fixed 會使 均等分 treeview1 table treeview1 td first child 選擇下乙個兄弟節點 注意 前後都有空格 treeview1 td first child td attribute 含有某個屬性的元素 treeview1 td cl...