网站开发建设好处,邯郸网站设计定制,部门网站建设需求确认表,做婚纱的网站简言
实现在有宽度的一行内#xff0c;标签过多会出现省略号。
实现
首先要实现单行省略的效果。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible content标签过多会出现省略号。
实现
首先要实现单行省略的效果。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 150px;margin: 100px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;border: 1px solid red;}.box span {height: 20px;padding: 10px;background-color: skyblue;}/style
/headbodydiv classboxspan张三1/spanspan张三2/spanspan张三3/spanspan张三4/spanspan张三5/spanspan张三6/span/div
/body/html效果 缺陷
看着实现效果好像成功了。 但是如果你仔细看的话就会发现省略号在span标签里面。这样的话就不合常理父元素单行省略省略号肯定得出现在父元素里面子元素外面啊。
解决方案
将子元素的类型设置为行内块元素类型 即, display: inline-block; style.box {width: 150px;margin: 100px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;border: 1px solid red;}.box span {display: inline-block;height: 20px;padding: 10px;background-color: skyblue;}/style效果 结语
结束了
