Today I experienced another disgusting page misalignment phenomenon. The reason is very simple. When outputting Chinese characters on the page, if the area width is not enough, it will automatically wrap. However, English letters cannot, which means that you output something like "aaaaaaaaaaaa" A string of characters, the page thinks it is a word and cannot be broken. If it is output in
, and the width of this area is only 3 characters, then the page will be misaligned. . If you change it to "aaa aaa aaa aaa", of course it's OK, because the page treats them as four words, and it can be wrapped.If you want to force a line break, just add word-wrap:break-word;/*force a line break*/ in the CSS design
#test{
…;
…;
word-wrap:break-word;/*Force line break*/
}