Shulou(Shulou.com)06/03 Report--

This article shows you how to solve the problem of ulli content width, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Let's solve the problem first:

Li {max-width: 100pxbank * the specific value is modified by yourself, and the next line is the same * / width:_expression (document.body.clientWidth > 100? "100px": "auto"); overflow: hidden;}

Just change the top 100 to your own maximum width.

Then let's talk about the width of UL LI content:

With regard to the variable length of ul li text, one line displays multiple columns. When the width is specified, the solution is when the text length exceeds the specified li width:

The code is as follows

The code is as follows:

Send to 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

The code is as follows:

.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 the member information, and one line shows three, but now there is a problem. Taobao member _ u_865b68p1g7 (u_265i54w3n7@localhost.com) is a member of this line because of its fixed width, but the content in the li exceeds the 200px and the content is underlined and is followed by a number or English. The content after the underscore will be automatically changed to another line. But because the height of the li is fixed, the line that falls is the same as the following

This can control the width of the text display, and can be neatly arranged, but when there is too much text in the li, when it exceeds the 200px, the contents will fall to the following line, resulting in overlap with the following line. If you add overflow:hidden; to the .menber li, the content will not fall, but the content will not be displayed completely. What should be done at this time? the best solution is not to specify the width and set the width to auto. And add white-space:nowrap; this code can not automatically wrap the content (encounter _ and other strings), this problem is solved, but because the width is not fixed, so the content display will not be so neat, everything is very difficult to be perfect, to take into account some will lose some, this is no way, if you prawns have a better solution can also share.

The above content is how to solve the problem of ulli content breadth. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.