white-space:nowrap; // Enforce no line breakswhite-space:pre-wrap; // only for Chinese, force a line breakword-break:break-all; // only for English, use letters as the basis, force a line breakword-break:break-word; // only for English, use the word as the basis, force a line breakoverflow:hidden; // The exceeded content is hiddentext-overflow:ellipsis; // The content beyond is ellipsisCopy the code

Single-line text

.text {
  width: 100px;
  white-space: nowrap;       /* Make text non-newline */
  word-break: break-all;     /* Newline, based on letters */
  overflow: hidden;          /* Hide the overflow */ 
  text-overflow: ellipsis;   /* Displays ellipses to represent hidden text */
}
Copy the code

Multiline text

Method 1

.text {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;       /* The excess content is displayed with ellipsis */
    word-break: break-all;         /* Newline, based on letters */
    display: -webkit-box;          /* Display objects as elastic stretchable box models */   
   / *! autoprefixer: off */
    -webkit-box-orient: vertical;  /* Sets the arrangement of child elements */
    -webkit-line-clamp: 3;         /* Set the number of lines to display, the extra part will be displayed as... * /
}
Copy the code

Disadvantages: Only works with WebKit-kernel browsers. So most mobile browsers support it, Google, Safari as long as it’s not too late. Internet Explorer and Firefox do not support this method.

Method 2

Use the pseudo-element implementation, put the pseudo-element above the last word, achieve the purpose of ellipsis display. This method has good compatibility, but ellipses appear when the text is not exceeded.

p {
  position: relative;
  line-height: 1.2 em;
  max-height: 3.6 em;
  width: 300px;
  /* Sets the text to align at both ends */
  text-align: justify;
  overflow: hidden;
}

p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  /* Set the ellipsis size to 1 font size */
  width: 1em;
  /* Set the background to cover the last word */
  background: #fff;
}
Copy the code

white-space

Is used to set how whitespace in an element is handled

Whether characters are displayed on a newline

grammar

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* https://github.com/w3c/csswg-drafts/pull/2841 */
white-space: break-spaces;
Copy the code

value

value meaning compatibility
normal Consecutive whitespace characters are merged, and newlines are treated as whitespace. Line breaks are necessary to fill line boxes
nowrap Consecutive whitespace characters are merged. butLine breaks are not allowed
pre Consecutive whitespace characters are preserved. Before encountering a newline character or<br>A line break occurs when the element
pre-wrap Consecutive whitespace characters are preserved. Before encountering a newline character or<br>Element, or is needed to fill a “line box box”line boxes) “before a line break. onlyWorks on Chinese, forcing line breaks
pre-line Consecutive whitespace characters are merged. Before encountering a newline character or<br>Element, or is needed to fill a “line box box”line boxes) “will break a line
break-spaces Same behavior as pre-wrap, except for the comments below

Any reserved whitespace always takes up space, including the end of the line. A newline occurs after each reserved space character, including between space characters. This reserved space takes up space without hanging, thus affecting the inherent dimensions of the box (minimum and maximum content sizes).

Behavior of a white-space value

value A newline Spaces and tabs Wrap text The end of each line Spaces
normal merge merge A newline delete
nowrap merge merge Don’t wrap delete
pre keep keep Don’t wrap keep
pre-wrap keep keep A newline hang
pre-line keep merge A newline delete
break-spaces keep keep A newline A newline

word-break

Specifies how to break lines within words

grammar

/* Keyword value */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global value */
word-break: inherit;
word-break: initial;
word-break: unset;
Copy the code

value

CJK refers to Chinese/Japanese/Korean

value meaning compatibility
normal Use default line breaking rules (Chinese line breaking, continuous English line breaking) field3
break-all Allows word breaking between any non-CJK text (works in English only, with letter as basis, enforced line breaking) All browsers support it
keep-all Word newlines in CJK text are not allowed, only at half-corner Spaces or hyphens. Non-cjk text actually behaves the same as normal. Safari8/9 on iOS is not supported yet, so it is not suitable for use on mobile
break-word His effect isword-break: normal 和 overflow-wrap: anywhereOf, regardless ofoverflow-wrapWhat is the value of (for English only, force a line break based on the word) IE does not support

overflow-wrap & word-wrap

Relationship between overflow-wrap and word-wrap

The word-wrap property was originally a private property of Microsoft, and has been renamed overflow-wrap in the current draft text specification of CSS3. Word-wrap is now an “alias” for overflow-wrap. Stable versions of Google’s Chrome and Opera browsers support the new syntax.

role

To indicate whether the browser allows such word breaks to prevent overflow when an unbreakable string is too long to fill its wrapper

In contrast to word-break, overflow-wrap only produces an interrupt if the entire word cannot be placed on its own line without spilling over.

grammar

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
Copy the code
value meaning
normal Lines can only break at normal word breakpoints. (e.g. space between two words)
break-word Means that if there is no extra space in the line to hold the word to the end, words that normally cannot be split will be forced to break a newline