css 實現單行 多行文字顯示

2021-10-24 16:54:39 字數 816 閱讀 4321

1.單行顯示文字,超出顯示省略號,很容易實現(需要加寬度width屬來相容部分瀏覽):

width:200px;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

2.多行文字顯示,限制行數,超出顯示省略號,如下實現:

width:200px;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

3.多個字元限制不換行,橫向縮放,來實現固定寬度內,中英文本元不一致,顯示效果不換行且優雅好看:

如上效果借助vue專案中 i18n翻譯和vue樣式變換,僅作為參考。

css實現單行(多行)文字溢位顯示

overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...

CSS實現單行 多行文字溢位顯示 的總結

效果圖如下 實現方法 overflow hidden text overflow ellipsis white space nowrap 還需要加寬度width屬來相容部分瀏覽。效果圖如下 實現方法 display webkit box webkit box orient vertical webk...

CSS實現單行 多行文字溢位顯示省略號( )

如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。實現方法 overflow hidden text overflow ellipsis white space nowrap 效果如圖 但是這個屬性只支援...