Learning Weekly-2025-01-19

Use JS to determine where multiple lines of text overflow

如何用JS判断多行文本溢出位置?【渡一教育】_哔哩哔哩_bilibili

Bad method:

• Calculate text width by font-size. Not all text is of equal width, so the calculation is incorrect.
• Get text width by canvas' measureText() function. Draw the text on the canvas, and then get its width. This way has the following drawbacks:
  • This method can only get the width of the entire text. If you want to know the position of overflow, the only way is calculate the width of each word, and then determine the position of overflow.
  • There are many way to truncate text, such as word truncate, and it is impossible to accurately determine the position of overflow of the actual situation.

Good method:

• Create a div element, set its style to position: fixed; visibility: hidden;, and append it into the body. Then, use scrollWidth to get the width of the text. This method can accurately determine the position of overflow.

Two balls' loop motion animation

黑白小球交替的loading效果【渡一教育】_哔哩哔哩_bilibili

• Use Sass generate all the styles of the balls by @for loop.
• Use transform: translate3d() to achieve the loop motion of the balls.
• Set the animation-delay to negative value to make the all balls move when the webpage is loaded.