搜 索

怎样将网页中一段超出div宽度的字符串自动变为省略号

编辑:QTOOL.NET日期:2018-05-22252

在制作网页中,有时候列表页的标题长度远远超出了该html标签所设置限定的宽度,
一般都用超出隐藏代码将其隐藏,那么如果想要将超出一段的字符串变为省略号该如何实现.
假设一个class为ceshi的div标签 ,其宽度为500px,高度为35px,通过内容填充将其超出该部分
div与css文字超出div演示示例图
 
从上图可以看出已经超出了一行字符,在css中写入overflow: hidden,即可将超出的部分进行隐藏
 
隐藏超出文本部分示例图
 
继续在css中写入white-space:nowrap此为强制不换号,然后输入text-overflow: ellipsis其中text-overflow为溢出文本内容属性,ellipsis为超出部分省略号代替的意思.
实现将超出部分隐藏并且自动省略号代替图
保存好后刷新页面即可显示.
 

TAG标签:css3
此文章由QTOOL.NET编辑
最新文章

热门标签