Four ways to implement text overflow ellipsis in css (with code)

The content of this article is about the four methods of realizing text overflow ellipsis in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the project, there is a need to add an ellipsis after a line or a certain number of lines. When adding an ellipsis after a certain line, the -webkit-line-clamp and -webkit-box-orient attributes are used. There will be situations where the webpack packaging-webkit-box-orient attribute is ignored. Here is the record

1. Single line implementation of text ellipses

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;

2. Which line implements the text ellipsis

display: -webkit-box;
-webkit-box-orient: vertical;  /* 设置方向 */
-webkit-line-clamp: 2;  /* 设置超过为省略号的行数 */
overflow: hidden;

• When using the webpack packaging tool, this -webkit-box- will be ignored Orient attribute, just change it to the following writing method

display: -webkit-box; 
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;

3. Use js to add an ellipsis after the number of words

if (title.length > 26) {
  title = title.substring(0, 27) + "...";
}

4. Word-break and word-wrap

• white-space:normal (automatic line wrapping), when the written text exceeds the defined width, it will automatically wrap, but When the written data is a bunch of characters or letters or numbers without spaces, and exceeds the width of the container, the container will be expanded without line breaks.

• You can use: word -break:break-all;word-wrap:break-word to solve

• word-break:break-all When the width of the container is exceeded, if a word is very long, it will Truncate the word and write it separately

• word-wrap:break-word When the width of the container is exceeded, if a word is very long, the word will be placed on the next line instead of the word Truncate

word-break: normal | break-all | keep-all
normal: allow line breaks within words
break-all: allow line breaks within words
keep-all : Only line breaks at half-width spaces or hyphens.

word-wrap : normal | break-word
normal : Allow content to break the specified container boundary
break-word : Content will wrap within the boundary. If necessary, word-breaks also occur

The above is the detailed content of Four ways to implement text overflow ellipsis in css (with code). For more information, please follow other related articles on the PHP Chinese website!