CSS一行及多行超出省略

2021-08-08 11:24:43 字數 510 閱讀 2831

text-overflow: ellipsis;沒有使溢位部分省略,而是換到下一行,是因為要配合

overflow: hidden;

white-space: nowrap;

屬性一起使用

若要使文字超出2行省略,則要設定css為:

overflow:hidden;

text-overflow:ellipsis;

display: -webkit-box;       設為彈性伸縮盒子

-webkit-box-orient: vertical;     從上到下垂直排列元素

-webkit-line-clamp: 2;       顯示的行數

全域性設定ul,ol{

list-style:none;

之後,若需要使用有列表專案符號的列表時,需要這樣設定:

ul{list-style:disc inside;

只設定list-style:disc的話是無法顯示的。

inside表示列表縮排

css控制文字超出省略

單行文字操作省略 思路 1.設定inline block屬相 2.強制不換行 3.固定高度 4.隱藏超出部分 5.顯示 display inline block white space nowrap width 100 overflow hidden text overflow ellipsis 多...

css xx行超出省略號

line clamp1 兩行超出 line clamp2 前提 設定乙個寬度 目前沒有瀏覽器支援 box orient 屬性。firefox 支援替代的 moz box orient 屬性。safari opera 以及 chrome 支援替代的 webkit box orient 屬性。box o...

css實現單行 多行文字超出省略號

如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。實現方法 但是這個屬性只支援單行文字的溢位顯示省略號,如果我們要實現多行文字溢位顯示省略號呢。接下來重點說一說多行文字溢位顯示省略號,如下 實現方法 適用...