怎么用html和css实现标签折叠_随笔

用html和css实现标签折叠，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>用html和css实现标签折叠</title>

</head>

<body>

<li><a href="#"><h1>折叠标签A</h1>

<span>这里是描述标签A</span>

</a></li>

<li><a href="#"><h1>折叠标签B</h1>

<span>这里是描述标签B</span>

<span>这里是描述标签B</span></a>

<li><a href="#"><h1>折叠标签C</h1>

<span>这里是描述标签C</span>

<span>这里是描述标签C</span></a>

<li><a href="#"><h1>折叠标签D</h1>

<span>这里是描述标签D</span>

<span>这里是描述标签D</span></a>

</ul>

</body>

</html>

CSS样式为：

#fm{

overflow:hidden

background-color:#FFCCCC

width:200px

height:500px

overflow:hidden

}

#fm h1{

margin:0px

color:#FF3333

font-size:14px

}

#fm li{

list-sytle-type:none

display:block

width:178px

border:1px solid #00CCCC

border-bottom-width:0px

}

#fm li.end{

border-bottom-width:1px

}

#fm li a{

display:block

text-decoration:none

width:100%

padding:10px

}

#fm li a span{

display:none

color:#000000

font-size:12px

padding-top:10px

}

#fm li a:hover{

background:#fff

}

#fm li a:hover span{

display:block

cursor:hand

}

</style>

效果如图：

以上就是用html和css实现标签折叠的解决方法。

超出之后隐藏，有一个div，高度和宽度都是100像素，当里面的内容很多，div里撑不下时，如果设置overflow:hidden，就会把超出的内容隐藏掉不显示。 *** 作方法如下：

1、首先，html页面结构如图，有几个column，每个column里有几行方格，每个方格里有文字。文字可能过长，超出单元格大小。

2、首先禁止文字折行显示，并隐藏超出部分。对于文字元素使用white-space: nowrap样式。

3、接下来，要给宽度超出父元素的情况添加一些样式。使用js代码实现一个函数，获取所有这样的元素（如图是都含有state-text class的元素），并依次比较各自是否超过各自父节点宽度。如果超过，添加一个class用于增加样式。

4、然后，使用setInterval让这个函数每过一段时间执行一次，如图每3秒检查一下页面上所有class含有state-text的元素。

5、在js代码中，添加对应的更新css变量的逻辑。如图，获取父节点宽度，并在子节点上调用style.setProperty来设置css变量值。

6、最终实现了滚动效果，如图所示，即使各个单元格宽度不同，即使宽度是运行时变化的，它们都能实现合理的滚动显示。

不太明白

首先入库的时候如果把<br>这些写入数据库,也就没有这些问题了

如果提交表单的时候最好把回车空格换成<br> 入库

你说的如果是表格内换行,可以考虑用css控制

<td><div class="aa">首先入库的时候如果把这些写入数据库,也就没有这些问题了

如果提交表单的时候最好把回车空格换成</div></td>

.aa{width:200pxline-height:22px}

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7529812.html

怎么用html和css实现标签折叠

发表评论

评论列表（0条）