css 單行文字 多行文字超過用省略號表示

2021-10-03 10:22:30 字數 560 閱讀 3056

1、單行文字超過省略

/* 這裡要顯示的設定寬度 */

overflow: hidden;

white-space: nowrap;

/* 文字超出寬度則顯示ellipsis省略號 */

text-overflow: ellipsis;

width: 100%;

2、多行文字超過省略

display: -webkit-box; 

overflow: hidden;

/*! autoprefixer: off */

-webkit-box-orient: vertical; /* 設定方向 */

/* autoprefixer: on */

-webkit-line-clamp: 2; /* 設定超過為省略號的行數 */

text-overflow: ellipsis;

3、換行word-break和word-wrap

多行文字 單行文字的垂直居中

在說到這個問題的時候,也許有人會問css中不是有vertical align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical align屬性,但是它只對 x html元素中擁有valign特性的元素才...

css 處理 單行 多行 文字溢位

1 單行溢位 前提必須有寬度 width 300px whitewhite space nowrap 文字不會換行。overflow hidden 溢位多餘裁剪 text overflow ellipsis 顯示省略符號來代表被修剪的文字。2 多行文字溢位 因使用了webkit的css擴充套件屬性,...

css 實現單行 多行文字顯示

1.單行顯示文字,超出顯示省略號,很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示,限制行數,超出顯示省略號,如下實現 width 200px...