列表中文字太多 溢出使用省略号css方法
2018-06-24 02:18:52来源:未知 阅读 ()
我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替,实现以下效果:
- 文字太太太太多多多啦......
- 这个不多。
html:这是个列表。ul/ol都行。
<ul> <li>这是个短句子</li> <li>403是因为服务器拒绝了你的地址请求,或者你根本没权限访问网站,提供身份验证也没用,也就是说,用户被禁止访问了。然而除非与Web服务器管理员联系,否则一旦遇到403状态码都无法自行解决。</li> </ul>
首先,省略号的css代码为:text-overflow: ellipsis; 注意,这行代码经常不起作用,是因为其必须满足两个条件:1、宽度必须设置;2、同时设置white-space: nowrap(不换行); 和overflow: hidden(超出部分隐藏)。因此,完整css代码:
li { width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display:inline-block;//如果是一个inline标签,还需要加入这一行代码,因为对于inline标签,设置width没有用。这里是li标签,本来就是block,因此不需要。 }
但是,问题来了,对li设置overflow: hidden后,整个列表的list-style-type,又不起作用了,无论设置哪种小图标都没有用。效果是这样的:
解决办法:ul添加设置list-style-position: inside;
但是!!!此时图标显示,溢出文字也隐藏了,但是省略号,又不知道哪里去了。。。。
最后我也不知道,为什么会造成这样的效果。但是,我有不屈不挠的精神,我吭哧吭哧,又开始了。。。。
我换了一种思路,在列表里修改样式,牵一发而动全身。我将要弄省略号的文字,用<span>包裹,就解决了。
<ul> <li><span>这是个短文字</span></li> <li><span>403是因为服务器拒绝了你的地址请求,或者你根本没权限访问网站,提供身份验证也没用,也就是说,用户被禁止访问了。然而除非与Web服务器管理员联系,否则一旦遇到403状态码都无法自行解决。</span></li> </ul>
css代码:
span{
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display:inline-block;//span是一个inline标签,设置width没有用。因此需要这句代码。
}
ul{
list-style-type:circle;
/*list-style-position: inside;注意,不需要添加这行代码*/
}
效果图:
哈哈哈。。。。终于实现了!!!!既有列表符号,又有省略号。
结论:设置溢出文字,不要直接在li标签上设置,因为会有list-style-type的问题,还是包裹在span中,设置span省略号。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端单体编码规范整理
下一篇:样式
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
- div中图片和文字同一行实现垂直居中 2020-03-29
- css3文字特效和浏览器兼容性 2020-03-18
- HTML连载70-相片墙、盒子阴影和文字阴影 2020-02-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash