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>

主要为大家详细介绍了js自定义input文件上传样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

原文： el-select内容过长，设置超出长度用省略号来表示 style scoped，以下包含穿透scoped .[class名] /deep/ .el-select__tags-text { display: inline-block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .[class名] /deep/ .el-tag__close.el-icon

首先设定3个关键样式，指定样式后，超长文本就会显示省略号了 /* 文本超长class */ .textEllipsis{ color:red;/*颜色*/ overflow: hidden;/*不允许滚动条*/ white-space: nowrap;/*不允许文本换行*/ text-overflow: ellipsis;...

最简单的实现方法是在隐藏过长的table列，直接在标签中添加一个属性show-overflow-tooltip即可。但我的表格中，在同一列中不止有一种标签，我只想让这一列的某一部分实现这个效果，所以这种方法很不方便。效果图如上 <el-table-column min-width="35%" show-overflow-tooltip> <template slot-scope="scope"> <div style="line-he

ant-design中的select多选时，多选完成后下拉框一行展示