If CSS is powerful enough, will you still use programming to realize the existing functions of CSS? _html/css_WEB-ITnose

Now CSS3 has come out, but in fact, due to some reasons, I have never used some styles that are supported by CSS2. I feel that I really need to calm down and take a look at those things and see what has been ignored before. Today I will mainly talk about three things that are often used in our programming, as follows.

1. Ordered list serial number

a. Application scenario

There is a list that needs to be displayed with a serial number to facilitate the user to know the number of records in the current list, and the user can delete it at will After a record is deleted, the sequence number is rearranged.

b. Thoughts

The usual way I didn’t know about styles before was to change the list information into the serial number of the current record through index 1 when displayed. This method is very simple. But it becomes troublesome when the record is deleted arbitrarily. Obviously, you can remove the current record through jquery. Rearranging the serial number is a headache at first sight. In fact, it won’t be a headache once you get used to it. I will use $.each() and use the index in it to achieve the effect. But we programmers want to use the simplest way to achieve the most powerful functions. In this way, we have more time to focus on the system business logic.

c. Study

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

d. Note

After all, CSS is made by foreigners, and Chinese serial numbers like one, two, and three cannot be realized in this way

e. Legend

2. Display ellipses to represent trimmed text

a. Application scenario

I don’t think I need to describe this scenario. Everyone knows that when there is a lot of content to be displayed, if the page is not trimmed, It may become deformed.

b. Thinking

In fact, we used to like to use programs to truncate strings and then splice ellipses for display. Usually, this method basically achieves the results we want. But have we ever thought about it, assuming that in a div with a width of 100px, the string can only display 10 Chinese characters, then when we implement the program, we will display it by intercepting 9 Chinese characters "...". When we actually display The string does not exceed 10 Chinese characters, and we cannot splice "..." yet. Doesn’t it feel cumbersome to handle the previous logic through the program? The more troublesome situation is that when the width of the div is adjusted to 200px, a headache arises, and the program is modified to intercept 19 Chinese characters. Don't you feel a little irritable all of a sudden? The most troublesome situation, now comes, is the English letters, "I" and "M". The widths occupied by their 10 "I"s and 10 "M"s are very different. I won't describe it anymore, I believe what I mean when I talk about this English alphabet.

c. Study

http://www.w3school.com.cn/cssref/pr_text-overflow.asp

d. Pay attention

to To achieve the interception effect, the width of the current label must be fixed. Otherwise, the pruning effect may not be achieved.

e. Legend

3. Backstage

a. Application scenario

I will use a picture to show it here. But no more description.

b. Thinking

We encounter this scenario relatively rarely. Usually this happens in Chinese characters, but it will happen in English, like the second one above line, the system recognizes it as a word, so it does not force a line break. But this is far from the beautiful style we want.

c. Study

http://www.w3school.com.cn/cssref/pr_word-break.asp

d. Note

in There is basically no need to consider this issue in the Chinese context. Such a problem will only occur if a single word in English is too long. This question was raised by our testing department in the hope that everyone will notice this.

e. Legend

Summary: This topic is mainly for two purposes. First, I hope everyone can look back at what they have learned. Did I miss something, or did I not understand it deeply enough at the time? Secondly, I hope everyone will look forward and see if there is a better way to replace the original clumsy implementation method. What is written above is actually old stuff, but many Siege Lions still implement it in the old way. So this is just an introduction. I hope everyone can master new knowledge to replace the old knowledge, and at the same time be able to look back on the past.