css实现文本溢出隐藏

时间：2023-03-30 23:00:09 CSS

css实现文本溢出显示省略号在制作响应式网页时，如果要保证在不同尺寸的设备下布局不会错乱，我们需要限制文本的长度。基本设置在介绍下面的方法之前，我们先对所有的例子进行基本的样式设置/*基本设置*/div.box{width:100px;高度：100px；边框：1px实心#ddd；颜色：#333；行高：1.8；margin:30pxauto;}设置好，现在开始执行=.=1.单行溢出隐藏显示...

清晰的目录结构是首要目标，至于命名只要能达到表达的目的即可。目录结构清晰

/*1.单行溢出隐藏显示...（设置在文本容器上）*/.text-box1p{white-space:nowrap;/*超出空格不换行*/overflow:hidden;/*超越隐藏*/text-overflow:ellipsis;/*文字溢出显示省略号*/}每一步我都必须记清楚，因为我发现我没有写清楚为什么要这样设置，过段时间我真的会忘了。运行效果：2.多行溢出隐藏显示...

清晰的目录结构是首要目标。至于命名，只要达到表达的目的即可。目录结构清晰

/*2.多行溢出隐藏显示...（设置在文本容器上）只兼容带有webkit内核的浏览器*/.text-box2p{display:-webkit-box;/*将对象转换为弹性盒模型显示*/-webkit-box-orient:vertical;/*设置flexbox模型子元素的排列方式*/-webkit-line-clamp:2;/*限制文本行数*/overflow:hidden;/*beyondhidden*/}运行效果：3.多行溢出隐藏显示...

清晰的目录结构是首要目标。至于命名，只要达到表达的目的即可。目录结构

/*3.多行溢出隐藏显示...（跨浏览器兼容+伪元素定位）*/.text-box3p{position:relative;行高：1.4em；/*行高和高度都是倍数，这里以三行文字溢出隐藏为例*/height:4.2em;overflow:hidden;}.text-box3p::after{/*为兼容IE8，使用:after*/content:"...";/*替换内容更灵活*/position:absolute;底部：2px；右：5px；填充：03px；背景：#fff；-阴影：0010px#fff；/*边缘处理*/}这种方法比较灵活，但是效果可能比较死板，所以需要对边缘进行模糊处理。运行效果：就是这个意思，可能会有更合适的处理方式