字体超过长度自动隐藏css，文字超出div隐藏

css处理文字过长时显示为多余部分省略

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow：ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候，必须配合overflow：hidden； white-space：nowrap； width：具体值；这三个样式共同使用才会有效果。

输入CSS代码，见下图，转到下面的步骤。第三步，执行完上面的操作之后，浏览器运行index.html页面。 如果此时文本超过2行，则多余的部分将自动显示为省略号，见下图。这样，就解决了这个问题了。

代码如下。在css内，设置div的宽度为130px，同时设置其浮动向左，居左对齐。在css内，设置div内的文字不换行，当文字超过宽度width时，隐藏文字。在css内，设置div内文字超过宽度时，以点点点代替文字显示。

cont{overflow： hidden；/*内容超出后隐藏*/}。为cont类添加内容显示为一行：white-space： nowrap； ，内容超出后显示为省略号：text-overflow： ellipsis； 。保存好代码后使用浏览器查看效果。

div{ width： 100px；overflow：hidden；text-overflow：ellipsis；display：-webkit-box；-webkit-box-orient：vertical；-webkit-line-clamp：2；} 浏览器运行index.html页面，此时文字超过2行会自动把多余部分用省略号显示 。

相关问答

Q1: 若某个标签里的内容超过标签的尺寸,则超出的内容自动隐藏的CSS...

解决CSS样式 这时我们可以使用CSS overflow样式解决：对应样式overflow：hiddenDiv{overflow：hidden}这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow：hidden将会隐藏超出DIV宽度高度的内容包括图片。

取消overflow：hidden是因为经反复实验，该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容，有时反而需要容器高度能随内容的多少而撑开容器高度。

“清除”就是clear这个属性的中文解释，“浮动”是float这个属性的中文解释。清除（clear）的意思可以理解为把这个元素指定方向的内容给移走。

ul标签是块级元素padding，margin设置为0，而li标签设置了padding，所以li对于ul是溢出的 使用overflow：auto；可以使框架包含溢出元素。overflow：hidden 的作用是：溢出被剪裁，其余内容将不可见。

Q2: 如何通过CSS自动隐藏超出宽度的字不带省略号

首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的标签中，输入css代码：li{width： 100px； white-space： nowrap；overflow： hidden；}。

方法一： 代码如下： 任意长度的字符串 说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值，并且宽度不能是百分数，否则在IE中会被认为是字符总长的百分比。

overflow： hidden； 设置元素内容溢出隐藏。overflow-y： hidden； 设置垂直溢出隐藏。

不换行 */ white-space：nowrap；/* 不换行 */ overflow：hidden；/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow：ellipsis；/* 当对象内文本溢出时显示省略标记(...) ；需与overflow：hidden；一起使用。

width：88px；overflow：hidden；}即可。楼主是不是说的不呢过换行的，{ overflow： hidden；text-overflow： ellipsis；white-space： nowrap；width： 60px；} 可以这样设置绝不会换行，而且如果文字大于设定宽度还会出现省略号。

Q3: 怎样让文字超出div后自动隐藏并且显示省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，两种方法可以实现：一是用程序开截取字符长度，二是用样式来做。

新建一个html页面。在html代码页面找到body标签，在body标签里创建一个p标签，然后输入显示的内容并添加一个class类为 class=cont。

ellipsis ： 　当对象内文本溢出时显示省略标记（...）说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。请参阅我编写的其他书目。不过要给DIV定宽度，才有效果。

Q4: 怎样隐藏溢出DIV的内容

1、加如下样式即可.overflow： hidden； text-overflow： ellipsis； white-space： nowrap； width：100px；div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的特定的格式表现。

2、那么我们可以使用将容器的overflow属性值设置为hidden即可。 上面的设置的是将所有超出的内容都隐藏，我们也可以设置横向或者纵向超出内容的隐藏。

3、CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。

4、设置DIV的大小实现隐藏 将div的宽度和高度设置为零，也可以达到隐藏的效果。/*示例*/div{width：0px；height：0px；overflow：hidden；/*规定当内容溢出元素框时隐藏。防止div大小设置为零，里面的文本却还是显示。

5、css溢出与换行该如何处理文本过长，在容器内显示不下的时候，是否要换行，使用 white-space ： normal / nowrap 属性，normal ： 采用浏览器默认设置；nowrap ： 不换行。

Q5: DIV+CSS如何实现一行文字显示不下的自动隐藏!虽然是很菜鸟的问题但还是...

1、单纯的css只能实现一行显示不下的时候显示省略号，如果是多行的话，就需要用js实现了。

2、下面的div文字的颜色设置成transparent。.one{ color：transparent；} 给上面的div设置背景色。

3、你想要怎么显示呢？你这个分类名称的确太长，一行显示不全，只能分两行了。要不然你就写个长度截取的函数，让长出来的部分显示为省略号，鼠标放上去显示全称提示。

4、(1).文字超出一行，省略超出部分，显示...如果这种情况比较多，可以取一个切合作用的类名用于复用。

5、div的垂直居中问题 vertical-align：middle； 将行距增加到和整个DIV一样高 line-height：200px； 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。

6、还必须定义：强制文本在一行内显示（white-space：nowrap）及溢出内容为隐藏（overflow：hidden）。只有这样 才能实现溢出文本显示省略号的效果。

关于字体超过长度自动隐藏css和文字超出div隐藏的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。