请问用CSS如何控制自动隐藏多余的内容？

Posted 2023-04-27

限定两行可以显示，当内容超过两行时，后面的用“..”代替，用CSS如何控制啊？

如果说你想兼容所有的浏览器恐怕只能用js控制来实现，当然css也不是不能解决，只是用css针对不同的浏览器有不同的属性，最终的效果也可能有略微的差别，你可以试试这种方法。
首先设置div的宽度高度 这是必要条件，用这个属性text-overflow : clip | ellipsis。
clip : 不显示省略标记（...），而是简单的裁切 Firefox支持
ellipsis : 当对象内文本溢出时显示省略标记（...）IE支持
试例
.div_name width:300px; height:50px; text-overflow:clip; overflow:hidden; 追问

首先谢谢您的回答，这样能控制两行吗？

追答

div限定大概两行的高度 是可以控制的。如果div不能限制高度的话你就只能用js控制了。你可以先
试试。

参考技术A 例如你的行高为25,div高为50,这样就显示了2行
#divNameheight:50px;line-height:25px;overflow:hidden;
至于后面的用省略号代替,则由你自己实现,只有IE支持CSS有省略号 参考技术B 这个好像是要程序截取的吧，截取多少个字符。

html中表格内容超出后隐藏问题

我想让表格里面的内容当超出表格宽度的时候就把超出部分隐藏起来,可是用css控制，行不通,大虾们帮帮忙吧,谢谢了
我自己解决了

table-layout版本：CSS2 兼容性：IE5+ 继承性：有

语法：

table-layout : auto | fixed

参数：

auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关

说明：

设置或检索表格的布局算法。
对应的脚本特性为tableLayout。请参阅我编写的其他书目。

示例：

table table-layout: auto; 参考技术A <table width="200" border="1" style="table-layout:fixed;">
<tr>
<td width="80" style="width:80px;overflow: hidden;text-overflow:ellipsis">
<nobr>我想让表格里面的内容当超出表格宽度的时候就把超出部分隐藏起来,可是用css控制，行不通,大虾们帮帮忙吧,谢谢了</nobr></td>
<td> </td>
<td> </td>
</tr>
</table> 参考技术B

1、<table width="400" border="1" cellpadding="1" cellspacing="0" style="table-layout:fixed;">……</table>

2、设置单元格td的样式；

<style type="text/css">

td

width:25%;/* 80px; */

overflow: hidden;

text-overflow:ellipsis;

text-align: center;

</style>