A single suspension

  1. Displays one line, and ellipses for the portion that exceeds it
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Copy the code

Line shows

  1. Display two lines, and the remaining portion of the ellipsis
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
/* autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
Copy the code

  • Be sure to set the minimum height for the outer div to show only 2 lines, otherwise it will look like this

(Photo from blog.csdn.net/weixin_4329…)

The CSS properties involved

1. overflow: visible | hidden | scroll | auto | clip (css3)

Attribute values instructions
visible If overflow content is not handled, the content may exceed the container
hidden Hide the contents of the overflow container without scroll bars
scroll Hide the contents of an overflow container, which can be rendered by scrolling
auto The scrollbar does not appear when the content does not overflow the container, and appears when the content does overflow the container
clip Like hidden, clip is used to hide the contents of an overflow container without a scroll bar. The difference is that clip is a container that does not scroll at all, while Hidden can still programmatically scroll content

2. text-overflow: clip | ellipsis

Attribute values instructions
clip When inline content overflows the block container, the overflow portion is cut out
ellipsis When inline content overflows a block container, replace the overflow part with (…)

If the block container <‘ overflow ‘> is non-visible, define whether the block container for inline overflow should truncate or add (…). And custom characters.

  • For the <‘ text-overflow ‘> attribute to take effect, the block container must explicitly define <‘ overflow ‘> as non-visible and explicitly or implicitly define <‘ width ‘> as non-auto. <‘ white-space ‘> is the nowRAP value

3. white-space: normal | pre | nowrap | pre-wrap | pre-line

Specifies whether the element preserves Spaces between text lines. Specifies whether to wrap text when it exceeds a boundary.

Attribute values instructions
normal Default processing mode. The sequence of Spaces is combined into one, and internal newlines are determined by the newline rule.
pre Leave the state of your input intact, with white space, line breaks, and no line breaks when the text is outside the bounds. Equivalent to pre element effect
nowrap The value is the same as normal, except that all text is forced to be displayed on the same line.
pre-wrap The value is the same as the pre value, except that the text will be wrapped when it goes beyond the boundary.
pre-line The value is the same as normal, but line breaks are preserved for text input.

4. The word – break: normal | keep -all | break – all | break – word

Defines line breaks between words and characters of element content text.

Attribute values instructions
normal The default line break rule. Depending on the rules of the respective language, line breaks are allowed between words
keep-all For CJK (Chinese, Korean, Japanese) text, line breaks are not allowed within characters. Non-cjk text behaves the same as normal
break-all Line breaks are allowed within any character for non-CJK text.
break-word Like break-all, except that it requires that a word without a line break must remain a whole unit

Difference: juejin. Cn/post / 684490…

9. display: -webkit-box

7. – its – box – received: horizontal | vertical | inline – axis | block – axis set or retrieve the child element of the objects of telescopic box arrangement

Attribute values instructions
horizontal Sets the children of a scaling box object to be arranged horizontally from left to right
vertical Sets the child elements of a scaling box object to be arranged vertically from top to bottom
inline-axis Sets the children of the flex box object to be arranged along the row axis
block-axis Sets the children of the flex box object to be arranged along the block axis
天安门事件
8. -webkit-line-clamp**
Used to limit the number of lines of text displayed on a block element. To achieve this effect, it needs to combine the other WebKit properties.