Finally became a member of the bloggers. This is my first blog post. I write about the problem and solution of ul li content width_html/css_WEB-ITnose

Writing a blog post for the first time, let me write about a problem I just encountered.

Regarding ul li, the text length is not fixed, and multiple columns are displayed in one line. When the width is specified, the text length exceeds the specified li width. Solution:

The following code

Send objects (total 10 members)

• tester123456(tester12346@qq.com)


• tester12345(tester12345@qq. com)


• test12345(test12345@qq.com)


• willme(sdfsdf@sdf.com)


• willbin(sdfsd@22f.com)


• zhangsan(zhangsan@qq.com)


• Taobao member_u_865b68p1g7(u_265i54w3n7 @localhost.com)


• test

Style

.menber{width:754px; margin:0px auto;line-height:25px; max-height:200px;}
.menber li{clear:none;width:200px;float:left;height:25px;line -height:40px; margin-right:30px;}

This code displays all member information, three in one line, but now a problem arises, this line

Taobao member_u_865b68p1g7 (u_265i54w3n7@localhost.com)

Because the width is fixed, but the content in li exceeds 200px, and there is an underline in the content, and the underline is followed by a number or English, the content after the underline will be automatically changed to a new line. However, due to The height of li is fixed, causing the dropped line of content to be consistent with the following

. This can control the width of the text display and can be arranged neatly. However, when there is too much text in the li and exceeds 200px, the content inside It will fall to the lower line, causing it to overlap with the content of the lower line. If you add overflow:hidden; in .menber li, the content will not fall, but the content will be incompletely displayed. What should you do at this time? The best solution The way is not to specify the width, set the width to auto; and add white-space:nowrap; this code can prevent the content from automatically wrapping (when encountering strings such as _). This problem is solved, but because the width is not fixed , so the content display will not be so neat. It is difficult to be perfect in everything. If you have to take into account some, you will lose some. There is no way. If you have a better solution, you can share it.