您现在的位置是：网站首页> 编程资料编程资料

文本超出部分隐藏的两种方法css3实现渐变、阴影、超出指定文本省略号显示等一些效果实例CSS文本超出指定宽度后隐藏并显示为省略号的实现方法CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现CSS超出文本指定宽度用省略号代替和文本不换行CSS文本超出div或者span时用省略号代替 css实现li中文本超出行宽自动隐藏CSS文本超出2行就隐藏并且显示省略号

2021-09-04 1139人已围观

简介本文主要介绍了文本超出部分隐藏的两种方法：单行隐藏和多行隐藏。具有一定的参考价值，下面跟着小编一起来看下吧

文本超出部分隐藏，总结两种方法。

1、单行隐藏

html代码

当文字超过范围的时候，超出部分会隐藏起来。

css代码

.mi { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; }

2、多行隐藏

html代码

当文字超过范围的时候，超出部分会隐藏起来。可以设置第几行开始隐藏。

css代码

.mi { width: 200px; overflow: hidden; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

上一篇：详解css样式中的border-image深入浅析css3 border-image边框图像详解详解CSS3中border-image的使用CSS3 border-image详解、应用及jQuery插件深入浅出CSS3 background-clip,background-origin和border-image教程 css3 border-image使用说明

下一篇：常见CSS与HTML使用误区详解关于老式浏览器兼容HTML5和CSS3的问题CSS 控制Html页面高度导致抖动问题的原因CSS 控制因Html页面高度导致抖动的问题解决方法ie6下关于html编码问题导致js出错css不被应用的解决方法HTML标签语义化（含H5） CSS2 打印属性让打印HTML文档不出问题XHTML CSS网站设计的优势和问题网页制作中注意应用HTML标签的问题网页制作中注意应用HTML标签的问题xhtml css网页制作问题的解决方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网