CSS realizes single-line and multi-line overflow and ellipsis effects of text

single line text

.text {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

• overflow: hidden(If the length of the text exceeds the limited width, the excess content will be hidden)

• white-space: nowrap(Set the text to be displayed on one line and cannot wrap)

• text-overflow: ellipsis(Specifies that when the text overflows, an ellipsis is displayed to represent the trimmed text)

multiline text (css)

.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

• -webkit-line-clamp: 2(Used to limit the number of lines of text displayed in a block element, 2 means to display a maximum of 2 lines. In order to achieve this effect, it needs to be combined with other WebKit properties)

• display: -webkit-box(Use in conjunction with 1 to display the object as a flex box model)

• -webkit-box-orient: vertical(Used in conjunction with 1 to set or retrieve the arrangement of the child elements of the flex box object)

• overflow: hidden(The text overflows the limited width to hide the content)

• text-overflow: ellipsis(In the case of multi-line text, use the ellipsis "..." to hide the overflowing text)

 

multiline text (js)

• Monitor DOM size changes

• Determine whether scrollHeight > offsetHeight overflows

• Binary search multi-line interception character critical value (algorithm solution: judge whether the string overflows, binary search string overflows the critical substring, control...display)

Reprinted in: https://mp.weixin.qq.com/s?src=11×tamp=1618627893&ver=3013&signature=*TZk8fTGv0ca2DRiTSoJFTszSgATyV5WJIoA0k6CclYuSQ5vq3eDmXIigrdxwyQLID-Ygf3TBsmNUociT7 FJfTOk6jscTrr1m41* Jw5g9RYBkzUhiiZOgROGp3SXNsDA&new=1