ul li內容宽度的难题的处理计划方案

日期:2021-03-06 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

先来处理难题

li{
max-width: 100px;/*实际标值自主改动,下1行同样*/
width:expression(document.body.clientWidth>100?"100px":"auto");
overflow: hidden;
}

把上面的100改为你自身的最大宽度便可。

随后再来探讨UL LI內容宽度难题

有关ul li文本长度不固定不动,1行显示信息两列。当特定宽度时,文本长度超出特定的li宽度时处理计划方案:
 
以下编码


拷贝编码
编码以下:

<h4>推送目标(共10个会员)</h4>
<div id="send_email">
<ul>
<li>tester123456(<a href="mailto:tester12346)</li">tester12346)</li</a>>
<li>tester12345(<a href="mailto:tester12345)</li">tester12345)</li</a>>
<li>test12345(<a href="mailto:test12345)</li">test12345)</li</a>>
<li>willme(<a href="mailto:sdfsdf)</li">sdfsdf)</li</a>>
<li>willbin(<a href="mailto:sdfsd)</li">sdfsd)</li</a>>
<li>zhangsan(<a href="mailto:zhangsan)</li">zhangsan)</li</a>>
<li>淘宝会员_u_865b68p1g7(<a href="mailto:u_265i54w3n7)</li">u_265i54w3n7)</li</a>>
<li>test</li>
</ul>
</div>

款式


拷贝编码
编码以下:

.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;}

这段编码是可能员信息内容都显示信息出来,1行显示信息3个,可是如今难题出現了,这1行 <li>淘宝会员_u_865b68p1g7(u_265i54w3n7)</li> 由于宽度固定不动,可是li里边的內容超出了200px致使且內容中有下划线且下划线后是数据或英文致使下划线后边的內容会全自动换1行显示信息,可是因为li的高宽比是固定不动的致使掉下去的1行內容与下面
 
这个能够操纵文本显示信息的宽度,而且能够齐整的排序,可是当li里边的文本过量,超出200px时,里边的內容会掉到下面1行来,致使与下面1行的內容重合,假如在.menber li里边添加overflow:hidden;的话內容不容易掉来,可是內容会显示信息不全,这时候应当如何办呢,最好是的处理方法便是不特定宽度,将width设定为auto;而且 再加white-space:nowrap;这个编码可让內容不全自动换行(遇到_等标识符串时),这个难题是处理了,可是因为宽度不固定不动,因此內容显示信息不容易那末齐整的,全部事儿都很难10全10美,要顾及1些就要丧失1些,这是没法,假如各位大虾有更好的处理方法还可以共享1下。