Intercept, intercept, and intercept again

"Intercept" is the biggest headache in web design.

When the number of words exceeds the capacity, the layout is damaged either by exceeding the number or by line breaks. To avoid this situation, you must cut the word. Word truncation can be performed on both the front and back ends. The reason is that no matter what word truncation, there will be vulnerabilities, so double insurance is better.

Let's talk about the backgroundProgramA problem occurs when you intercept a word.

1. The number of characters to intercept is incorrect. Because English letters are shorter than Chinese characters, "Too long title" is longer than "title.
2. There are also some problems with word truncation by the number of bytes. We may use a Chinese character equal to two English letters as the criteria for word truncation. But in fact, "mm" is longer than "niu.
3. Even English letters have different lengths. The longest letter should be "W", and the shortest letter should be "I ". Therefore, the length cannot be determined by the number of letters.

However, in any case, the length can be roughly controlled by the number of characters in bytes, which is a relatively simple method.

Okay, let's talk about the front-end part:

1. Add overflow: hidden to all variable fields.
   But this will bring some negative effects. First, overflow: hidden may cut down the drop-down box or floating layer. Second, overflow: hidden will close the elements (the same effect as overflow: auto ).
2. If you do not want to wrap a line with too many words, remember to write white-space: nowrap.
3. If you do not want to use too many words to break the width, write word-wrap: Break-word and word-break: Break-all. Of course, this is only valid for IE and not standard. If you want to use a line break in Firefox, you have to use a script, but I think it is a waste of client resources.

In fact, the principle is very simple. But in practice, it is not that easy to consider the question of word truncation. Full consideration of robustness is always a requirement for excellent programmers, and the same is true for Web pages.

Tip: http://www.mikkolee.com/29