Number of posts (in the case of images)

Count the number of posts (in the case of images) [purpose] Post preview: when the number of words exceeds a certain limit, display part of the post, and use & nbsp; & nbsp ;.. show Full Text & nbsp; to replace [background] The post contains labels generated by the rich text editor in Chinese, English, and English, image (also the count of the number of words in the tag Post (in the case of images)
[Objective]
Post preview: when the number of words exceeds the limit, the part of the post will be displayed, and the rest will be replaced by the full text.

Background]
The post contains labels and images (also introduced by tags) generated by the rich text editor in Chinese, English, and English. The Post content is processed by htmlspecialchars ().

[Current difficulties]
1. I hope that the "part" of the post will be displayed, and the "part" will look like a large volume, rather than a large number of characters, because in UTF-8, if a certain number of characters is used as the limit, the English post and the Chinese post will have obviously different results. I hope to display them at the end, for example, they are all five lines.
2. correct splitting in UTF-8 environment, without converting a Chinese character into two garbled characters
3. posts containing images can also be correctly split, rather than splitting somewhere in the middle of the tag about the image.
4. due to the introduction of rich text editors, a lot of content is labeled, which seems difficult to handle during previewing. I think, the format of rich text is not included during preview, but I don't know if there is any way to remove these labels.
5. considering the security of user input, I want to use htmlspecialchars () to process user input. However, if the tags of rich text are added and htmlspecialchars () is used, the tags are also processed. The result is that the labels are displayed. So I first use htmlspecialchars () to process user input, and then add rich text labels.

[Implementation example]
When Zhihu's website is not open, the preview is what I want to do-no format, including graphs, almost four or five lines

[Current solution]
Save the content as a formatted body and a formatted preview with a captured length. This makes previewing easier, however, the problem is how to remove the formatted text (previously: the content was first processed by the rich text editor after htmlspecialchars (), and there will be redundancy in this case, I do not know if there is any good way

[Others]
The rich text editor is generated by textarea. based on html, the rich text editor is added with tags.

[Final]
It took me a long time to describe this question. Thanks to everyone who has read this post ..
I think everyone should understand what I mean, right? I hope it will not be dizzy...

Thank you !!

In addition, my website: ideologically recorded http: // 42.121.107.221 was just launched for testing yesterday, and my record filing has not been completed yet. it is my personal hobby, this is a place where I write my own ideas. we have the website positioning at the bottom of the page. please give me some advice!
------ Solution --------------------
Different image sizes (for example, an image is only a small ICON or LOGO). To avoid deformation, there is a standard for scaling. it is impossible to display all images in the same size. If this factor is included, the situation will be more complex.

However, the more restrictions, the more concentrated and clear the methods. Obtain the image size to participate in the display control. Chinese problems can also be solved.
------ Solution --------------------
At first glance, there are a lot of bugs on the website. if you have time, summarize them.
------ Solution --------------------
If you want to accurately define the words in a region, the numbers alone cannot be used.
I have done this before. the method is to create a div and add words (an img tag is also regarded as a word) one by one. if we find that the div height is higher than a preset value, delete the word. The efficiency is relatively low, but the performance is better.
------ Solution --------------------
#5 is called "enumeration"
You can also use the dynamic programming method to treat each element (text or image) as a rectangle and abstract the problem into a small rectangle with the largest filling in the large rectangle. This is a classic algorithm with a lot of existing code