overflow:hidden 长字段的隐藏与回显

轩辕灬帝一 2016-11-21 05:25:01
//当要显示的文本内容过多时,用省略号表示(由overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 这三个属性设置);当鼠标定位到该处时,又可完整显示出来(由title属性设置)
<html>
<body>

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<table>
<td>
<div style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext">
somelongtextsomelongtext
</div>
</td>
<td>
<div style="width:110px;background-color:#dddddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="some long text">some long text</div>
</td>
</table>
</body>
</html>

hidden隐藏的内容在回显的时候只能按照浏览器的固定样式吗?能否自己设置样式,该怎么样来实现???
...全文
240 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
slwsss 2016-11-21
  • 打赏
  • 举报
回复
<html>
<body>

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<table>
<td>
  <div style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext">
somelongtextsomelongtext
</div>
</td>
<td>
<div class="a" style="width:110px;background-color:#dddddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="some   long   text">some   long   text
	<div >some   long   text
	</div>
	</div>
</td>
</table> 
</body>
</html>
<style>
	.a div{display:none;}
	.a:hover div{display:block;position:absolute;color:red;font-size:36px;}
</style>

61,125

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧